HTMLページの読み込みと解析プロセスの詳細な紹介

ブラウザがHTMLを読み込みレンダリングする順序

1. IE は上から下へダウンロードし、上から下へレンダリングします。ダウンロードとレンダリングは同時に行われます。

2. ページの特定の部分をレンダリングするときに、その上の部分はすべてダウンロードされています (関連するすべての要素がダウンロードされているわけではありません)。

3. 意味的に解釈可能なタグが埋め込まれたファイル (JS スクリプト、CSS スタイル) に遭遇した場合、IE のダウンロードプロセスによってダウンロード用の別の接続が有効になります。

4. スタイルシートがダウンロードされると、以前にダウンロードされたすべてのスタイルシートと一緒に解析されます。解析が完了すると、以前のすべての要素 (以前にレンダリングされたものも含む) が再レンダリングされます。

5. JS または CSS で再定義が行われた場合、後で定義された関数によって、以前に定義された関数が上書きされます。

JS 読み込み中

1. ダウンロードと解析を並行して行うことはできません (ダウンロードをブロックします)。

2. JS が参照されると、ブラウザは js リクエストを送信し、リクエストが返されるのを待ちます。ブラウザは安定したDOMツリー構造を必要とし、JSは

コードは、document.writeやappendChildを使用したり、location.hrefを直接使用してジャンプするなど、DOMツリー構造を直接変更します。JSの変更を防ぐために、ブラウザは

DOM ツリーを変更するには DOM ツリーを再構築する必要があるため、他のダウンロードとレンダリングがブロックされます。

HTMLページの読み込みを高速化する方法

1. ページの軽量化:

a. ページのサイズは読み込み速度に影響を与える最も重要な要素です。

b. 不要なスペースとコメントを削除します。

c. インラインスクリプトと CSS を外部ファイルに移動します。

d. HTML Tidy を使用して HTML の重量を軽減したり、いくつかの圧縮ツールを使用して JavaScript の重量を軽減したりすることもできます。

2. ファイル数を減らす:

a. ページで参照されるファイルの数を減らすと、HTTP 接続の数を減らすことができます。

b. 多くの JavaScript ファイルと CSS ファイルは結合できるので、結合するのが最適です。Caibangzi は、JavaScript、functions、および Prototype.js を base.js ファイルに結合しました。

3. ドメイン名のクエリを減らす:

a. DNS クエリとドメイン名解決にも時間がかかるため、外部の JavaScript、CSS、画像などのリソースへの参照を減らす必要があります。使用するドメイン名は少ないほど良いです。

4. キャッシュ再利用データ:

a. 繰り返し使用されるデータをキャッシュします。

5. ページ要素の読み込み順序を最適化します。

a. 最初にページに最初に表示されるコンテンツと関連する JavaScript および CSS を読み込み、次に、最初は表示されない画像、フラッシュ、ビデオなどの重いリソースなどの HTML 関連のものを読み込みます。これらは最後に読み込まれます。

6. インライン JavaScript の量を減らす:

a. ブラウザパーサーは、インライン JavaScript によってページ構造が変更されると想定しているため、インライン JavaScript を使用するとコストが高くなります。

b. コンテンツを出力する方法として document.write() を使用しないでください。最新のブラウザのページコンテンツを処理するために、最新の W3C DOM メソッドを使用してください。

7. 最新の CSS と適切なタグを使用する:

a. 最新の CSS を使用してタグと画像を減らします。たとえば、最新の CSS + テキストを使用すると、一部の画像を完全にテキストのみに置き換えることができます。

b. HTML を解析するときにブラウザが「エラー修正」を実行しないように、有効なタグを使用します。HTML Tidy を使用して HTML をスリム化することもできます。

8. コンテンツをチャンク化する:

a. ネストされたテーブルを使用せず、代わりにネストされていないテーブルまたは div を使用します。大きなネストされたテーブルベースのレイアウトを複数の小さなテーブルに分割すると、ページ全体 (または大きなテーブル) が完全に読み込まれるまで表示を待つ必要がなくなります。

9. 画像と表のサイズを指定します。

ブラウザが画像や表のサイズを即座に判断できれば、レイアウト作業を行わなくてもページを即座に表示できます。

b. これにより、ページの表示が高速化されるだけでなく、ページの読み込みが完了した後にレイアウトが不適切に変更されることも防止されます。

c. 画像は高さと幅を使用します。

HTMLページの読み込みと解析プロセス

1. ユーザーが URL を入力すると (HTML ページであり、初めてアクセスする場合)、ブラウザはサーバーにリクエストを送信し、サーバーは HTML ファイルを返します。

2. ブラウザは HTML コードの読み込みを開始し、<head> タグ内で外部 CSS ファイルを参照する <link> タグを見つけます。

3. ブラウザは CSS ファイルに対して別のリクエストを送信し、サーバーは CSS ファイルを返します。

4. ブラウザは HTML の <body> 部分のコード読み込みを継続し、CSS ファイルが取得されたので、ページのレンダリングを開始できます。

5. ブラウザはコード内で画像を参照する <img> タグを見つけ、サーバーにリクエストを送信します。このとき、ブラウザは画像がダウンロードされるまで待たずに、次のコードのレンダリングを続行します。

6. サーバーは画像ファイルを返します。画像は特定の領域を占め、後続の段落のレイアウトに影響するため、ブラウザは戻ってこの部分のコードを再レンダリングする必要があります。

7. ブラウザは、Javascript コードの行を含む <script> タグを見つけ、すぐに実行します。

8. Javascript スクリプトはこのステートメントを実行し、ブラウザにコード内の <style> を非表示にするように指示します (style.display="none")。なんと悲劇でしょう。突然、この要素が失われ、ブラウザはコードのこの部分を再レンダリングしなければならなくなりました。

9. ついに </html> の登場です。ブラウザは大騒ぎです...

10. 待ってください、まだ終わりではありません。ユーザーがインターフェースの「スキンを変更」ボタンをクリックすると、JavaScript によってブラウザが <link> タグの CSS パスを変更します。

11. ブラウザは出席者全員に電話をかけ、「全員荷物をまとめて、最初からやり直さなければなりません...」と言います。ブラウザはサーバーに新しい CSS ファイルを要求し、ページを再レンダリングします。

<<: JavaScriptカルーセルの実装について

>>: Tik Tok サブスクリプションボタンのアニメーション効果を実現する CSS