会社が IDC コンピューター ルームに展開されている VIP Web サイトにアクセスすると、次のように感じられます。非常に遅い。これは何が原因でしょうか?ページの応答時間を短縮し、ユーザー エクスペリエンスを向上させるには、ユーザーが何に待ち時間を費やしているかを知る必要があります。
下の図に示すように、ログイン ページを追跡できます
上の図から、HTML ドキュメントが総応答時間の 20% のみを占めていることが分析でき、他の 80% 応答時間は、JS、CSS、画像、その他のコンポーネントのダウンロードに使用されます。したがって、WEBのフロントエンドには最適化の余地がたくさんあります。WEBのフロントエンド最適化とバックエンド最適化を総合的に考慮して、WEBのパフォーマンス最適化計画を立てます。
1. 最小化 HTTP リクエスト
1、 スクリプトとスタイル ファイルを結合する たとえば、複数の CSS ファイルを 1 つに結合したり、複数の JS ファイルを 1 つに結合したりできます。
2、 CSS スプライト CSS 背景 関連要素を使用して背景画像 、 を絶対的に配置し、複数の画像を 1 つの画像に結合します。
2.ブラウザキャッシュを使用する
ユーザーが Web サイトの異なるページを閲覧すると、同じ JS、CSS、写真など、多くのコンテンツが繰り返されます。これらのファイルをローカルにキャッシュすることをブラウザーに提案したり強制したりできれば、ページによって生成されるトラフィック量が大幅に削減され、ページの読み込み時間が短縮されるでしょう。
サーバー側の応答 header によると、ファイルにはブラウザーのキャッシュ ステータスがいくつかの異なるレベルがあります。
1. サーバーはブラウザに対し、このファイルをキャッシュせず、サーバー上のファイルを毎回更新するように指示します。
2. サーバーはブラウザに指示を与えません。
3。最後の送信で、サーバーは Last-Modified または Etag データをブラウザに送信し、再度閲覧するときに、ブラウザはローカル バージョンが最新かどうかを確認するためにこれらのデータをサーバーに送信します。最新のものは、サーバーが 304 コードを返し、ブラウザーにローカル バージョンを直接使用するか、そうでない場合は新しいバージョンをダウンロードするように指示します。一般に、静的ファイルのみが存在する場合、サーバーはこれらのデータを提供します。
4. サーバーはブラウザにファイルを強制的にキャッシュし、有効期限を設定します。キャッシュの有効期限が切れる前に、ブラウザはサーバーと通信せずにローカル キャッシュ ファイルを直接使用します。
私たちがしなければならないことは、特にJS、CSS、画像などの変更が少ないファイルに対して、ブラウザを強制的に4番目の状態にしようとすることです。
3. 圧縮コンポーネントを使用する
IE と Firefox ブラウザは両方ともクライアント GZIP をサポートし、クライアントが受信した後、クライアントに送信します。解凍には、サーバーとクライアントの CPU の一部がわずかに消費されますが、帯域幅の使用率が高くなります。プレーンテキストの場合、圧縮率は非常に優れています。各ユーザーが帯域幅の 50% を節約すると、レンタルした帯域幅で 2 倍の顧客にサービスを提供でき、データ送信時間が短縮されます。 4.
画像とJS
画像をプリロードする最も簡単な方法は、JavaScript で新しいImage() オブジェクトをインスタンス化し、画像の URL をロードすることです。パラメータとして渡されます。 function preLoadImg(url) {
var img = new Image();
img.src = url;
}
JSと画像をプリロードできます 5.
スクリプトを下部に配置スクリプトを上部に配置することによって生じる問題
1,
スクリプトを使用する場合、スクリプトの下にあるコンテンツのプログレッシブレンダリングがブロックされます2,
スクリプトのダウンロード時に並列ダウンロードがブロックされます
一番下に置くとが発生する可能性がありますJS エラーの問題。スクリプトが読み込まれていない場合、ユーザーがスクリプト イベントをトリガーします。
状況を総合的に考えてください。6.
スタイルファイルをページの上部に配置しますスタイルシートがロードされていない場合、レンダリングツリーを構築するのは無駄です。スタイルファイルがページの下部に配置される場合、 1、白い画面 2、スタイルなし コンテンツのフラッシュ 7. 外部JSとCSS を使用して、インラインJSとCSSを外部JSに作成します、 CSS。インライン JS と CSS の繰り返しダウンロードを減らします。 8. コンポーネントを複数のドメインに分割する
A ． ブラウザは、DNS、3と組み合わせた アドレスに基づいて、URLに対応するIPアドレスを解析します。 HTTPリクエスト を送信4。 リクエストされたサーバーへの接続を開始し、関連コンテンツをリクエストします 5． ブラウザはサーバーから返されたコンテンツを解析し、ページを表示します 上記は基本的にリクエストから実装までのページの基本的なプロセスです。以下ではこのプロセスを分析します。 URLを入力すると、ブラウザは、IPアドレスを知ることによってのみ、このURLに対応するIPが何であるかを知ることができます。指定されたサーバーの特定の IP とポート番号にリクエストを送信します。ブラウザの DNS パーサーは、URL を正しい IP アドレスに解析する役割を果たします。この解析プロセスには時間がかかり、この解析期間中、ブラウザはサーバーから何もダウンロードできません。ブラウザとオペレーティング システムは、DNS 解像度キャッシュ サポートを提供します。 IPアドレスを取得した後、ブラウザはHTTPリクエストをサーバーに送信します。プロセスは次のとおりです: 1 TCPパケットを送信して、サーバーに接続2 3 HTTP の GET リクエストを送信します。このリクエストには、共通の cookie やその他の head ヘッダー情報など、多くのものが含まれています。 リクエストが送信された後は、サーバー側のプログラムが最終結果をクライアントに送信します。 html ドキュメントです。いわゆる html ドキュメントは純粋な html コードであり、画像、スクリプト、 CSS などは含まれません。 。それがページの html 構造です。なぜなら、この時に返されるのはページのhtml構造だけだからです。この html ドキュメントがブラウザに送信されるのにかかる時間は非常に短く、通常、応答時間全体の約 10% を占めます。 html のスケルトンを上から下まで段階的に解析することです。 この時点で html ドキュメント内で img タグに遭遇すると、ブラウザはこの img レスポンスの URL アドレスに HTTP リクエストを送信して、画像を取得して表示します。 html ドキュメント、flash に多数の画像がある場合、ブラウザはそれらを 1 つずつリクエストしてからレンダリングします。すべての画像をリクエストする必要がある場合は、前述の手順を実行する必要があります。つまり、 を解析します。 URL 、オープン tcp 接続など。データベースにアクセスする場合と同様に、接続を開くとリソースも消費されます。できるだけ少ないデータベース接続を開き、接続プール内のより多くの接続を使用するようにします。同様に、tcp接続も再利用できます。 http1.1 は、永続的な接続 (永続接続) の概念を提案しました。これは、同じ HTTP 接続で同時に複数のリクエストを処理でき、 tcp 接続を削減できることを意味します。 ページのhtmlスケルトンがロードされると、ブラウザはページ内のタグの解析を開始します、は上から下へ解析を開始します。 最初は head タグの解析で、head で引用される JS スクリプトがあることが判明した場合、ブラウザはこの時点でスクリプトのリクエストを開始します。 JS リクエストが完了するまで、ページ全体の解析プロセスが停止します。次に、bodyタグの解析など、ページが下方向に解析されます。bodyにimgタグがある場合、imgが複数ある場合、ブラウザはimgの対応するリソースをリクエストします。 img タグを追加すると、ブラウザはそれらを 1 つずつ解析します。解析は JS のように待機せず、同時にダウンロードされます。
URL
1に従ってください。 URLアドレスを入力するか、
URL
2
以上がWeb パフォーマンス最適化ソリューションの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
