第 1 章 Web サイトを開いて遅いステータス分析
会社が IDC コンピューター ルームに展開されている VIP Web サイトにアクセスすると、次のように感じられます。非常に遅い。これは何が原因でしょうか?ページの応答時間を短縮し、ユーザー エクスペリエンスを向上させるには、ユーザーが何に待ち時間を費やしているかを知る必要があります。
下の図に示すように、ログイン ページを追跡できます
上の図から、HTML ドキュメントが総応答時間の 20% のみを占めていることが分析でき、他の 80% 応答時間は、JS、CSS、画像、その他のコンポーネントのダウンロードに使用されます。したがって、WEBのフロントエンドには最適化の余地がたくさんあります。WEBのフロントエンド最適化とバックエンド最適化を総合的に考慮して、WEBのパフォーマンス最適化計画を立てます。
第 2 章 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つの状況が考えられます。 2、スタイルなし コンテンツのフラッシュ
7. 外部JSとCSS
を使用して、インラインJSとCSSを外部JSに作成します、 CSS。インライン JS と CSS の繰り返しダウンロードを減らします。
8. コンポーネントを複数のドメインに分割する
主な目的は、ページコンポーネントの並列ダウンロード機能を向上させることです。ただし、あまりにも多くのドメイン名にまたがらないように、2 サブドメイン名を使用することをお勧めします。
Nine、StreamliningJS
は2つのレベルで実行できます
1、合理化: コードから不要な文字を削除してサイズを削減します。
2、難読化: 合理化中にコードも書き直され、関数名と変数名が短い文字列に変換されます
Ten、StreamlinedCSS
不要なものを削除サイズを減らすためにコードから文字を削除します。効果とサイズ。
第3章 プログラムの最適化
第4章 データベースの最適化付録A
ページのリクエスト分析
入力URLからページレンダリングまでには、 5ステップ
1に従ってください。 URLアドレスを入力するか、
URL
2． ブラウザは、DNS、3と組み合わせた
URLアドレスに基づいて、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 のように待機せず、同時にダウンロードされます。
以上がWeb パフォーマンス最適化ソリューションの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
