HTMLページの読み込みと解析プロセスの詳細な説明-htmlチュートリアル-php.cn

ブラウザが 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 コード行を含む