フロントエンドのパフォーマンス最適化を学習するための準備として、HTML ページのレンダリングプロセスを理解する (続き)

昨夜、ブラウザのレンダリングプロセスに関するエッセイを書きましたが、小さなコードで説明しただけでした。ブラウザでテストしていないため、説得力が足りず、不完全な点もまだたくさんありました。今日はブラウザでテストし、その結果を皆さんと共有しました。テストプロセスは少し面倒かもしれませんが、ご理解いただければ幸いです。

テスト済みブラウザ: Chrome v 24.0.1312.52 m、Firefox v18.0、Opera v12.12。

WebKit カーネルでは、Web ページが表示されるときに、HTML ドキュメントを解析し、レンダリングツリーを生成し、最後にページをレンダリングするパーサーが存在します。これは 1 つのスレッドで実行されるため、2 つが同時に実行されることはありません。

2つのケースに分けて、異なるブラウザでテストしました。

スタイルファイルはヘッダーにあり、他の 2 つのスクリプトファイルは、本体の先頭に 1 つ、本体の下部に 1 つあります。スタイルファイルは本文の先頭にあり、スクリプトファイルの場所は上記と同じです。

テスト結果によると、Chrome ではスタイルファイルの場所が画像のダウンロード時間に影響しますが、他の 2 つのブラウザーでは状況に違いはありません。詳細なテストプロセスは次のとおりです。

テスト 1: スタイルファイルはヘッダーにあり、他の 2 つのスクリプトファイルは、1 つは本体の先頭に、もう 1 つは本体の下部にあります。

テスト済みコード:

コードをコピー

コードは次のとおりです。

<!doctypehtml>
<html>
<ヘッド>
<title>テストページ</title>
<link rel="スタイルシート" type="text/css" href="example.aspx?sleep=3" />
</head>
<本文>
<div>
やあ！

<script type="text/javascript">
document.write("<script src='other.aspx?sleep=5'></scr" + "ipt>");
</スクリプト>

<div>
こんにちは、またお会いしました！</div>
<img src="images/marx.jpg" alt="マルクス" />
<img src="images/engels.jpg" alt="英語" />
<img src="images/Lenin.jpg" alt="レーニン" />

<script src="last.aspx" type="text/javascript"></script>

</本文>
</html>

1. Chromeでのテスト結果

ブラウザでページを開いた後、下図のように Web ページのスクリーンショットをすぐに撮りました (クリックすると拡大画像が表示されます。下図も同じです)。

上図からわかるように、test.htm ドキュメントは読み込まれており、ページにはまだ何も表示されていません。example.css は保留状態ですが、下部の last.js は読み込まれています。これは、Chrome が事前にプリロードしてダウンロードし、ブラウザキャッシュに配置していることを意味します。 last.js は読み込まれていますが、その前にあるスタイルファイルがスクリプトの実行をブロックするため、まだ実行されていません。

次に、example.css が読み込まれると、画面に Hi there! が表示されます。ブラウザのスクリーンショットは次のとおりです。

ネットワークリクエストから、example.css が読み込まれ、other.js が保留状態になっていることがわかりますが、この時点で script タグ以下の 3 つの画像はダウンロードされています。これはブラウザのプリロード機能によるものです。ただし、ブラウザのレンダリングは other.js スクリプトによってブロックされるため、これら 3 つの画像とそれらの上の「Hi again」は表示されません。なお、現時点では last.js 内のコードは実行されていません。

次に、other.js が読み込まれると、ブラウザはレンダリングツリーを構築し、「Hi again」と表示して画像を表示します。 last.js は以前にダウンロードされているため、last.js がすぐに実行されます。レンダリングプロセス全体が完了しました。次の図に示すように:

このことから、Chrome は本文内のスクリプトリソースを事前に読み込むことがわかります (スタイルファイルはテストされません)。JavaScript スクリプトによって動的に読み込まれる JS は、画像ファイルのダウンロードには影響しませんが、その下の画像のレンダリングには影響します。

2. Firefoxでのテスト結果

Firefox でページを開いた後、以下に示すようにすぐにスクリーンショットを撮ります。

これは明らかに Chrome とは異なります。ページには「Hi there!」と表示されますが、背景色が白になっており、スタイルファイルがまだダウンロードされていないことがわかります。スタイルファイルが読み込まれるまで Chrome には表示されません。

次に、ページ全体が読み込まれると、スクリーンショットは次のようになります。

リクエストのウォーターフォールフローを見ると、Chrome と同様に、ブラウザが last.js をプリロードしていることがわかります。Chrome とは異なり、Firefox は画像をプリロードせず、other.js がロードされるまで待ってから読み込みます。

Firefox では、スタイルファイルはドキュメントのレンダリングに影響しません (最も一般的な現象は、Web ページが最初はスタイルなしで乱雑に表示されるが、スタイルファイルをダウンロードすると正常に表示されることです)。body では、JavaScript によって動的に読み込まれる JS ファイルによって、その背後にある画像のダウンロードがブロックされます。

3. Operaブラウザの場合

Opera でテストした結果、Opera ブラウザの方が「ルールを順守している」ことがわかりました。すべてのリソースは順番に読み込まれ、いわゆる事前読み込みはありません。以下は全体的な効果の図です。

Opera では、Chrome と同様に、スタイルファイルによってページのレンダリングがブロックされます。ただし、Opera のリクエストウォーターフォールフローでは、ページ上のすべてのリソースが段階的に読み込まれ、other.js が last.js の前に読み込まれることが示されています。プリロードはありません。

テスト 2: スタイルファイルは本文の先頭にあり、スクリプトファイルの場所はテスト 1 と同じです。


コードをコピー
コードは次のとおりです。

 <!doctypehtml>
 <html>
 <ヘッド>
 <title>テストページ</title>
 </head>
 <本文>
 <link rel="スタイルシート" type="text/css" href="example.aspx?sleep=3" />
 <div>
 やあ！

 <script type="text/javascript">
 document.write("<script src='other.aspx?sleep=5'></scr" + "ipt>");
 </スクリプト>

 <div>
 こんにちは、またお会いしました！</div>
 <img src="images/marx.jpg" alt="マルクス" />
 <img src="images/engels.jpg" alt="英語" />
 <img src="images/Lenin.jpg" alt="レーニン" />

 <script src="last.aspx" type="text/javascript"></script>

 </本文>
 </html>

テストの結果、Firefox と Opera ではテスト 1 と同じ結果になりましたが、Chrome では若干異なることがわかりました。テスト 1 では、head のスタイル ファイルが読み込まれるまで画像はダウンロードされませんでしたが、テスト 2 では、以下に示すように、スタイル ファイルと並行してダウンロードされました。

要約:

プリロードは存在しますが、Opera にはありません。Chrome の画像は body 内のスタイルファイルと並行してダウンロードできますが、head 内のスタイルファイルと並行してダウンロードすることはできません。スクリプトは、その前のスタイルファイルが読み込まれた後に実行されます。 Chrome と Opera では、アンロードされたリソースによってその背後にある要素のレンダリングがブロックされますが、Firefox ではブロックされません。テスト結果はブラウザのバージョンに関連している可能性があります。

ここまで読んで、少しわかりにくいと感じましたか？できるだけわかりやすく表現したいのですが、私のレベルが限られているため、これくらいしかできません。不適切な点があれば指摘していただければ幸いです。自分で試してみることもできます。

（終わり）^_^

<<: Dockerにおけるコンテナとイメージの違いについてお話ししましょう

>>: Vueアイコンセレクターのサンプルコード