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 関数と 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. ネストされたテーブルを使用せず、ネストされていないテーブルを使用します。大きなネストされたテーブルに基づくレイアウトを複数の小さなテーブルに分割すると、表示する前にページ全体 (または大きなテーブル) のコンテンツが読み込まれるまで待つ必要がなくなります。

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

a. ブラウザーが画像または表のサイズをすぐに決定できる場合は、レイアウトの調整をやり直すことなく、すぐにページを表示できます。

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

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


HTML ページの読み込みと解析プロセス
1. ユーザーが URL を入力し (それが HTML ページであり、初めての訪問であると仮定します)、ブラウザーはサーバーにリクエストを送信し、サーバーは HTML ファイルを返します。 。

2. ブラウザは HTML コードの読み込みを開始し、 タグ内に外部 CSS ファイルを参照する タグがあることを確認します。

3. ブラウザが CSS ファイルのリクエストを再度送信し、サーバーが CSS ファイルを返します。

4. ブラウザは HTML の 部分のコードを読み込み続け、CSS ファイルが取得され、ページが表示されます。

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

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

7. ブラウザは JavaScript コード行を含む