主要な指標のパフォーマンスの最適化
- ページのロード
- 画像の最適化
- CSSの最適化
- スクリプトの最適化
H5のパフォーマンスに関する考慮事項
- ブラウザのパフォーマンス
- ウェブサイトのパフォーマンステストの伝統的な方法
- 従来の開発ツールは、ブラウザの開発ツールを使用するネットワーク要求を見ると
- 侵入のJavaScriptコード検出DOMイベントが起こるの使用
- webPagetest Pingdomの次のようなサードパーティのサービスツールを使用し、
- いくつかのテストモードに対するこの尺度は、比較的単純であるが、基本的なタイミング及び流量演算機能、いくつかの他の指標のために、そのような試験の電池および他の態様の状況を反映検出しないように、従来の方法であります達成することは困難
- この問題を解決するために、W3Cは、ブラウザを提示し、性能試験の標準APIを導入し、この標準をサポートする非常に成熟している、この規格の目的は、サイトのパフォーマンス分析とプロセスの正確な制御の開発を簡素化することです改善、そして最終的にパフォーマンス
- たとえば、次のように
Navigation Timing API帯域幅、遅延や全体的なロード時間のホーム・ページ：のような実際のユーザデータを、決定するためにWeb開発者を支援する（ナビゲーションタイミング）
- ウェブサイトのパフォーマンステストの伝統的な方法
- ネットワークパフォーマンス
- ユーザトラフィックのための貯蓄は、フロントエンド技術では、考慮すべきモバイル開発問題で、まだ一部のページは良い戦略を体験可能にしながら、帯域幅を節約するだけでなく、必要です。
- 一般的なネットワークパフォーマンスの問題は、次のとおりです。
- DNSの問題：
- DNS障害やハイジャック
- DNS解決が遅いか、失敗しました
- TCP接続の問題：DNSが成功した宛先IPアドレスの後に得られた、あなたはとても成功し、時間のかかる、ネットワークパフォーマンスの要因となっているTCPコネクションを、TCP接続を開始することができます。TCPポート上のTCPコネクションにおける共通の問題は閉じられ、TCP接続タイムアウトされています
- 伝送負荷が大きすぎる：ちょうど遅い渡す渡すよりも多く、特別な最適化をしない場合は、トラフィック負荷が時間のかかるネットワーク全体への影響のため、実際の必要性は、ボリュームコントロールのページサイズに特別な注意を必要とする、非常に大規模であるよりもはるかに大きくなることがあり、過負荷を避けます
- 複雑なネットワーク国内外で、国内外のキャリアが低い国内のインターネット帯域幅と低速伝送の問題へのアクセスは非常に困難です。
- DNSの問題：
- 開発効率
- より良いコードの再利用、単純なページ、モジュラー：開発効率はいくつかの側面から考えることができます
- 選択ライブラリやフレームワーク：共通
Animate.cssライブラリ：jquery、Vue.js、React.js、underscore.js、Bootstrap、backbone.js、Font Awesome（字体图标库）、zepto.js(主要针对于移动端，和jquery非常相似)、jade | ejs、normalize.css、compass(Sass的工具库)、、Angular - 構築ツール
- WebPACKの：パッカーモジュール、最も広く使用されている1
- gulp.js：ビルドツールベースの自動化の流れ
- 搾取のためのJavaScript / CSSモジュール：分割統治は、ソフトウェア工学の重要な考え方は、複雑なシステムの開発と保守の礎です
- コンポーネントベースの開発：コンポーネントベースの開発汎用性の高い、どんなに騒々しいアプリケーションやバックエンドのシングルページテンプレートのレンダリングのフロントページ、コンポーネント開発のアイデアは、すべて使用することはできません。
ロードの最適化
- モバイル端末製品の機能については、スピードを追加すると、ユーザーエクスペリエンス、最高のオープン時間1-2Sの不可欠な部分です。ユーザ体験の向上のための開発者のサイトでは、サイト全体のコアバリューである、増加サイトの読み込み速度は、最も基本的なユーザーエクスペリエンスです。
- 以下の二つの側面から開始するようにHTTPリクエストを削減
- 収束のドメイン：通常の状況下で生成されたページを解決するために、ドメイン名の数が5つ以上のことはできません
- リクエストの数を減らします
- 複数のモジュールのリリースは、私たちが達成役立っている単一のファイル、にマージする必要がガバナンスにおける思考の開発であるスクリプトやスタイルシートの合併、WebPACKの
- CSSスプライト：CSS画像合成技術、小さな複数の画像を位置決め背景を介して所望の画像を検索するために、合成画像に合成することができます
- キャッシュをフルに活用します
- キャッシュはそのすべての静的リソースを更新するために、異なるタイムスタンプを使用することができ、サーバー側でキャッシュを設定し、長い更新するために、長期キャッシュ、キャッシュのリソースを使用しようとしなければならない、ロード時間を節約し、サーバーへのリクエストの数を減らすことができます使用してください。特に、いくつかの静的なリソースのために変更する必要はありません、資源の有効期限を設定するのに長い合理的な、キャッシュを設定するための時間です
- 使用CDN
- キャッシュ・ヘッダーを追加：ブラウザのキャッシュを、HTTPリクエストの数を減らすWebページを作ることによって、負荷速く、リアルタイムのリソースに対しては高くはないが、他のブラウザのキャッシュを使用することができ、クライアントのブラウザに伝える、そのヘッダ情報を経由してキャッシュサーバを設定します地元のコンポーネント。
- 圧縮
- 少ないリソースが唯一のストレージ・スペースのサイズを小さくすることはできません、あなたはまた、HTML、CSS、JavaScriptのコード圧縮およびその他のリソースにそのため、ファイルを転送するには、Webページの表示速度を高速化するために、ネットワークにあまり時間を転送することができます
- テキストデータ圧縮：テキストデータ（HTML CSS JavaScriptの）最適化と圧縮は3つの段階、準備すなわち出版物に分かれている（コメントを削除するには、CSS、JavaScriptのコードを削除マージが実行されていない）、コンパイル時に圧縮（混乱、スペースを削除し、ファイルをマージ）と伝送圧縮（GZIP）。注意事項：gzipの最初の圧縮のための可逆圧縮アルゴリズム、UNIXファイルシステムを使用して、それはサーバ側のコードの圧縮に属し、元のサイズの40％に圧縮一般平文コンテンツ
- 画像圧縮：一般的な画像フォーマット
.jpeg/.jpg.png.gifwebp - JavaScriptのロード・パフォーマンスの最適化
- が経験した4つの主要な段階を提示開始から終了までのページ
- ノンブロッキングロード：ページがウィンドウオブジェクトのonloadイベントがトリガされていることを意味してから、スクリプトをダウンロード延期と非同期でプログラムすることも可能であるが、非常に古いブラウザでは、これら二つをサポートしていないJavaScriptコードを、ロードが終了した後にキーがありますプロパティは、非同期の場合、しかしには、前と後のJSに依存するスクリプトがある場合は良いのjsスクリプトは、直ちに実行されますダウンロードしてください間違っている可能性があるので、注意して使用することに留意すべきです。
- が経験した4つの主要な段階を提示開始から終了までのページ
- 最初の画面負荷の最適化、需要のロード
- 「法のうち秒」に従うによるロードするための最初の画面
- 2つの実装の需要ロード
- 関連するロード・ライブラリーによって達成怠惰：レイジーロード
- 応答荷重：JavaScriptのローディングを導入したリソースに対応する画像の異なるサイズを達成するために、解像度やメディアクエリによって決定されます
- プリロード：プリロードのページ：次のユーザ操作を決定するには、先に実装をレンダリングする最初の画面の終了後、プリロード適切なリソースの、ユーザの行動によって行うことができる
<link rel = "prefetch" href= "www.example.com">、事前にロードされた絵：<link rel="prefetch" href="image.jpg">。そして、もう一つの技術をプリロードユーザーがWebを閲覧すると、ブラウザが必要で再び存在しないときに、Webページをユーザーがクリックして接続、ドメイン名のキャッシュ・ロード・ページで解決される予定DNSおよび分析技術（DNSプリフェッチ）に対応ユーザーエクスペリエンスを向上させるために達成し、ユーザーの待ち時間を減らすDNS解決、
- 他の負荷の最適化
- 最適化のクッキー
- 我々はすべて知っているように、HTTPはステートレスなプロトコルなので、クライアントが要求を行うたびに、次のリクエストは、ユーザーのステータスを関連付ける方法、それに含まれる状態要求データにすることはできません、クッキーは、この問題を解決する方法であります下図は、サーバとブラウザのクッキー処理と変速機との間であります
- サーバーにHTTPリクエストを介して送信され、対応するドメイン名へのアクセスにクッキーが、合理的な設計によるクッキーは、クッキーの量を減らすために、我々はそれを見ることができる図、することで、HTTP要求パケット、応答速度の大きさを小さくすることができます
- 私たちは、問題は、ブラウザがクッキーが過去に送られた後、彼らが課されるHTTP要求を開始することを知って、私たちは過去にそれを送信しない、クッキーを必要としない、解決する方法がありません。ソリューションは、専用のホストストレージ対応ファイルを使用することです。例えば、のような専門的なストレージ関連リソースのホストと：写真の使用はされて
gw.example.coom保存され、JavaScriptのリソース使用g.example.com使用するストレージ、AJAX要求をapi.m.example.comストレージのため、これらのリソースにアクセスする際には、余分なクッキーを送信しません
- 我々はすべて知っているように、HTTPはステートレスなプロトコルなので、クライアントが要求を行うたびに、次のリクエストは、ユーザーのステータスを関連付ける方法、それに含まれる状態要求データにすることはできません、クッキーは、この問題を解決する方法であります下図は、サーバとブラウザのクッキー処理と変速機との間であります
- リダイレクトを避けます
- リダイレクトは、別のURLに1つのURLからユーザーを再ルーティングするために使用されます。
- 301：永久リダイレクトは、ステータスコードがユーザ要求されたリソースがクライアントは、この応答を受信し、別の場所に移動されたことを示し、追加のリソースは、所望のダウンロード要求を開始する必要があります
- 302：一時的なリダイレクト：また、あなたが必要な追加のリソースをダウンロードするための要求を開始する必要があります
- 304：修正しない：コンポーネントの有効期限が切れている間、ブラウザは主に、デバイスキャッシュ内のコンポーネントのコピーを保持するために使用される場合、これはブラウザで条件付きGETリクエストを生成するサーバーコンポーネントが変更されていない場合、それは意志304のステータスコードを返しますが、このコピーを再利用することができますブラウザに指示体を運ばない、応答のサイズを小さく
- 図は、ページ上の赤い指向影響であります
- 最適化のクッキー
CSSの最適化
- CSSの最適化の目的：CSSファイルのサイズを縮小するだけでなく、ページのレンダリング速度を改善するための優れたCSSコードのヘルプを書いて、CSSのコードは、より良い組織化、より効率的にするだけではなく。実際には、ブラウザのレンダリングエンジンは、より良い少ないパフォーマンスをCSSルールを解析します。
- ページのレンダリング処理：
- 通常の状況を個別に書かれたHTML、CSSです下の文章のスタイルは、HTMLタグの属性は避け、それ以外の場合は、HTMLの注意の音量が大きくなります。ページのみ一度所望のユーザアクセスは、例えば、いくつかの一時的な活動をされていない場合来場者は、HTTPリクエストを減らすことができますバック持って表示され、インラインスタイルを使用することを期待することができますが、今回はHTMLの量を増やすために
ます。https：//juejin.im/post/5cfcb12851882502f9490f71で再現