6.1模範的なフロントエンドのパフォーマンス
パフォーマンステストツール：
Apacheのベンチマーク（AB）は、HTMLリクエストから消費の最後のバイトに受信開始時刻に送信されたすべての応答時間を得ました。次のようにABのコマンドラインは次のとおりです。
ABは-c] [同時ユーザーの-n番号[によって発行された要求の数] [ある]テストページのURL
放火犯：
DOMContentLoadedイベント：最初のHTMLドキュメントが完全にロードし、解析された後、DOMContentLoadedイベントがロードスタイルシート、画像、サブフレームの終了を待たずに、トリガされます。
onloadイベント：ロードされたページの後負荷や写真。
Webフロントエンドアプリケーションのパフォーマンスに関する研究は、正確な応答時間データを取得することはありませんが、実際には、それは（接続/ダウンロードリソースファイルを確立する）WebサーバーとWebアプリケーション・サーバーのパフォーマンスに部分的に依存し、一部のブラウザ/ウェブの実際のメカニズムに依存しますページの実行のJSファイル。これは、サーバー上の圧力に関連したWebサービスやアプリケーションサーバの負荷と応答時間に依存しますが、ブラウザ上で必要な実装メカニズムやJSファイルの実行時には、サーバ負荷や圧力にほとんど依存しません。後者の研究は、目的を逃れるために、この章の内容で検討されたために正確なデータに応答時間のこの部分を取得することではなく、全体的な応答時間を短縮し、フロントエンドのパフォーマンスと優れたWebアプリケーションをドラッグします。
6.2HTTP概要
プロトコルは、要求/応答モデルを使用するデータ伝送のためのHTTP WWWモード。HTTPプロトコル自体は、それらが各HTTP要求から独立している、非コネクション型のプロトコルです。
6.2.1HTTPプロトコル構造
1. Requestパケット・フォーマット
次のようにRequestパケットの形式は次のとおりです。
フォーマットの要求行動：
方法[デリミタ]リクエスト-uri [デリミタ] HTTP-VersionCRLF
HTTPメッセージボディには、HTTPリクエストの内容が含まれています。GETおよび他の方法のために、メッセージ本体は空であり、POSTメソッドでは、メッセージ本体はサーバに送信されるデータを含みます。
2.応答メッセージ・フォーマット
次のように応答メッセージの形式は次のとおりです。
応答メッセージの状態コード：
1XX：クラス情報応答受信要求を指示し、処理を継続します。
2XX：治療の成功応答のクラスアクションを表し成功し、受信理解し、受け入れられました。
3XX：指定されたアクションが完了したことを示すリダイレクト応答は、更なる処理を受けなければなりません。
4XX：クライアントのエラーは、クライアントの要求に構文エラーが含まれているか、正しく実行されていないことを示しています。
5XX：サーバーエラーは、サーバーが適切な要求が正しいことを実行することができないことを示しています。
レスポンスは、最初にサーバー自体に関するいくつかの情報を提供するHTMLコンテンツまたはメッセージ本文に含まれる他のデータを返します。
ヘッダ情報のフロントエンドに関連付け6.2.3プロパティ
1.Accept-エンコーディング
Accept-Encodingヘッダフィールドは、そのような受け入れ-エンコードとして、受け入れサーバー伝えページファイルの編集モードに含まれ、ブラウザによって送信されたリクエストヘッダの一つである：GZIPを、収縮されているサーバに伝えるために、ブラウザは、圧縮受け入れませんgzipの二つの方法を使用して、ページの内容。最後にページ圧縮と圧縮は、任意の大幅なパフォーマンスのギャップにつながることができませんか？圧縮は大幅ブラウザのパフォーマンスを向上させることができます。
⚠️：現在、すべての主要なブラウザは、ページ上のgzip圧縮をサポートしているので、サービス側が、この場合に返されるページは、gzipで圧縮されていることを確認する必要があります。
2.Connection
HTTPプロトコルは、非接続指向、ステートレスなプロトコルです。値は、接続キープアライブに設定されている場合は、ブラウザとサーバ間の持続的な接続を使用することに同意します。
3.Expires
HTTP応答データは、ヘッダフィールド、リターンデータの有効期限を示す値フィールドを有効期限含みます。⚠️ブラウザキャッシュメカニズム：Expiresヘッダに基づいて与えられた情報は現在時刻が所定時間未満である場合、ブラウザは直接キャッシュから対応するリソースファイルやHTML文書を取得期限と現在時刻が大きい場合、指定時間が経過するよりも、ブラウザは、リソースを取得するためにサーバに要求を送信します。
ブラウザでURLを開く6.3
サーバーのURLへの接続6.3.1
URLを開くには、ブラウザが必要ですユーザーがアドレスバーにURLを入力して、GOボタンをクリックし、実行するブラウザまず最初に置かれているサーバーのURLを見つけることです。DNSサーバーを照会することにより、ブラウザは、サイトのURLのIPアドレスが配置されている得ることができます。ブラウザは、サーバーへの接続を確立するために、アドレスへの接続要求を送信します。
6.3.2 HTML文書の該当ページを取得
接続が確立されると、ブラウザがサーバにHTTPリクエスト、HTML文書のURLに対応するリクエストを送信します。かかわらず、URLリクエストの静的なHTMLファイル、または動的スクリプト（ASPX、PHPやJSP）で、サーバはブラウザがHTML文書でなければなりません返します。HTML文書は、ブラウザのページレンダリングが必要とされています。
6.3.3必要なリソースへの文書とのアクセスを解析
文書を解析するブラウザのHTML文書を取得した後、目的は資源が必要とされているだけでなく、ページのDOMツリーを生成するかを知ることです。DOMツリーの生成は、DOMContentLoadedイベントがトリガされます。
すべての要素を並列にダウンロードすることができません。一般に、ページは、JSスクリプトの2種類が含まれている1が直接使用され、実行する必要の<script> タグはインラインJS文をマークし、他は外部JSファイル参照です。
ファイル6.3.4ページ上のJSとCSSファイル
ブラウザの場合、ページ上のJSファイルがJSコードを認定したときに処理されて、あなただけの二つのことを確保する必要があります。
（1）彼らが行ったHTML文書に表示される順序ですべてのJSコードは、それが実行されたときに破壊されないJSファイル間の依存関係が存在することを保証することができます。
（2）実行中のJSファイルを、DOMツリーが作成されているに応じて。
6.3.5onloadイベント
HTML文書の解析が完了すると、DOMツリーを生成し、必要なリソースファイルが正常にダウンロードおよび（JSファイルのために）実行されたすべてのページは、ブラウザがオンロードイベントとコールバックのHTMLドキュメントのonload関数を発行します。
6.4方法のフロントエンドのパフォーマンスを向上させます
フロントエンドのパフォーマンスを向上させる、2つのアイデアがあります。
（1）負荷にページに必要な時間を短縮
（2）利用者のルックアンドフィールを強化するために、ユーザーがすぐにページを見つけることができます
6.4.1ネットワークの時間を短縮
1. DNSキャッシング技術
2.ファイルを転送する必要があるのサイズを縮小
3.スピードアップファイルの転送速度を
リクエスト6.4.2の数を減らします
1.ブラウザのキャッシュを使用します
➢サーバは情報がリソースをキャッシュすることができている有効期限リソース応答ヘッドバンドを返すことを確認してください。
➢参照することによってスタイルシートとJSスクリプトを使用します。あなたが埋め込まれたスタイルシートとJSスクリプトを使用する場合は、すべての変更は、HTMLドキュメントのスタイルシートになりますし、JSのスクリプトは、再ロードする必要があるとキャッシングを利用することはできません。もちろん、何もキャッシュやスタイルシート、JSのスクリプトは、使用スタイルシートとJSスクリプト参照をリロードしないことが、より多くのHTTPリクエストにつながるがあります。
➢多くのURIを使用すると、ブラウザのキャッシュすることができます。多くのサイトでは、リソースファイルを返すために必要な画像やJSを生成するスクリプトを使用して、スクリプトのURIは絶えず変化してコンテンツにつながるいくつかのパラメータは、（一貫性のあるキャッシュURI厳格な要件）をキャッシュすることはできませんが付属しています。
2.マージされたイメージファイルを使用します
6.4.3並行性をダウンロードするには、ブラウザを改善
HTML文書の背面に1.JSファイル
2.複数のドメイン
ページの表示を行うために、できるだけ早く開始する6.4.4
（1）（例えば、上のように頭の中で参照されるHTMLスタイルシートの<head> タグ）
（2）最終文書をHTMLテーブルのスタイル参照。