昨夜、私はブラウザのレンダリングプロセスについてエッセイを書きましたが、小さなコードを通してそれを説明しました。ブラウザテストに合格しませんでしたが、十分に説得力がなく、多くの不完全な側面がありました。今日はブラウザでテストし、テスト結果を全員と共有しました。テストプロセスは少し厄介かもしれませんが、誰もがそれを理解していることを願っています。
テストブラウザー：Chrome V24.0.1312.52 M、Firefox V18.0、Opera V12.12。WebKitカーネルでは、Webページが表示されると、HTMLドキュメントを解析するパーサー（パーサー）があり、レンダリングツリー（レンダリングツリー）を生成し、最後にページをレンダリングします。これは1つのスレッドで行われるため、両方が同時に行われません。
次の2つの状況に分割し、さまざまなブラウザーでテストしました。
スタイルファイルはヘッドにあり、他のスクリプトファイルはボディの先頭に接続されており、もう1つはボディの下部にあります。スタイルファイルは本体の先頭にあり、スクリプトファイルは上記と同じです。テスト結果は次のようなものです。Chromeでは、スタイルファイルの場所は画像のダウンロード時間に影響しますが、他の2つのブラウザでは、2つの状況に違いはありません。以下は詳細なテストプロセスです。
テスト1：スタイルファイルはヘッドにあり、他のスクリプトファイルはボディの先頭に接続され、もう1つはボディの底にあります。テスト済みコード：
コードをコピーします