昨夜、ブラウザのレンダリングプロセスに関するエッセイを書きましたが、小さなコードで説明しただけでした。ブラウザでテストしていないため、説得力が足りず、不完全な点もまだたくさんありました。今日はブラウザでテストし、その結果を皆さんと共有しました。テストプロセスは少し面倒かもしれませんが、ご理解いただければ幸いです。 テスト済みブラウザ: 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 には表示されません。 次に、ページ全体が読み込まれると、スクリーンショットは次のようになります。
Firefox では、スタイル ファイルはドキュメントのレンダリングに影響しません (最も一般的な現象は、Web ページが最初はスタイルなしで乱雑に表示されるが、スタイル ファイルをダウンロードすると正常に表示されることです)。body では、JavaScript によって動的に読み込まれる JS ファイルによって、その背後にある画像のダウンロードがブロックされます。 3. Operaブラウザの場合 Opera でテストした結果、Opera ブラウザの方が「ルールを順守している」ことがわかりました。すべてのリソースは順番に読み込まれ、いわゆる事前読み込みはありません。以下は全体的な効果の図です。 Opera では、Chrome と同様に、スタイル ファイルによってページのレンダリングがブロックされます。ただし、Opera のリクエスト ウォーターフォール フローでは、ページ上のすべてのリソースが段階的に読み込まれ、other.js が last.js の前に読み込まれることが示されています。プリロードはありません。 テスト 2: スタイル ファイルは本文の先頭にあり、スクリプト ファイルの場所はテスト 1 と同じです。
要約: プリロードは存在しますが、Opera にはありません。Chrome の画像は body 内のスタイル ファイルと並行してダウンロードできますが、head 内のスタイル ファイルと並行してダウンロードすることはできません。スクリプトは、その前のスタイル ファイルが読み込まれた後に実行されます。 Chrome と Opera では、アンロードされたリソースによってその背後にある要素のレンダリングがブロックされますが、Firefox ではブロックされません。テスト結果はブラウザのバージョンに関連している可能性があります。 ここまで読んで、少しわかりにくいと感じましたか? できるだけわかりやすく表現したいのですが、私のレベルが限られているため、これくらいしかできません。不適切な点があれば指摘していただければ幸いです。自分で試してみることもできます。 (終わり)^_^ |
<<: Dockerにおけるコンテナとイメージの違いについてお話ししましょう
この記事では、アコーディオン効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...
MySQLはOracleのようなシーケンスを実装しているOracle は通常、主キー フィールドを処...
目次ネットワーク情報ホスト名を変更するDNSドメイン名解決ネットワーク関連コマンドファイアウォール暗...
データを整理するためのリストWeb ページの表示を制御する多数の HTML タグを学習した後、読者は...
導入: Lambda Probe (旧称 Tomcat Probe) は、Apache Tomcat...
序文この記事を始める前に、複数選択の質問をしてみましょう。フロントエンド開発でビルド ツールを使用す...
Web 開発では、次のような文字によく遭遇します: これは実際には HTML が...
この記事では主に、 list-itemの下にある::master疑似要素、 list-style-i...
tomcat の web.xml を構成する場合、サーブレットは比較的重要な問題です。ここでは、サー...
目次1. セットアップ1. セットアップ関数の最初のパラメータ - props 2. 文脈2. セッ...
取引特性1. アトミック性: トランザクションの開始後、すべての操作が完了するか、まったく実行されな...
データベースを使用するアプリケーションを開発する場合、必然的にユニオンクエリを使用する必要があります...
序文:データベースのバックアップの重要性は、特にデータの損失が深刻な結果を招く可能性がある実稼働環境...
目次vue2の場合vue3ではセットアップに関する注意事項セットアップライフサイクルは、before...
CSS のFlex(彈性布局)すると、Web ページのレイアウトを柔軟に制御できます。Flex Fl...