ブラウザーのロード、レンダリング、解析プロセスのブラック ボックスの簡単な分析_JavaScript スキル

Fiddler を使用して監視します。IE6 では、リソースのダウンロード順序は

です。

明らかに、ダウンロード順序は上から下であり、ドキュメント ストリームの最初に表示されるリソースが最初にダウンロードされます。 IE8、Safari、Chrome、その他のブラウザでも同様です。

Firefox はダウンロード順序を最適化しました:

Firefox は js、css を事前にダウンロードし、画像やその他のリソースのダウンロードを後回しにします。

レンダリングには、Fiddler を使用してネットワーク速度を遅くします。ダウンロード後すぐに CSS がページにレンダリングされ、レンダリングとダウンロードが同時に実行されることがわかります。 js の解析と実行も同様です。

JS の実行とページ読み込み関連イベントのトリガーに関して特別なテストが行​​われました。 Firefox で、テスト ページを開きます:

[22:13:32.947] HTML Start[22:13:32.947] normal inline script run time[22:13:34.904] normal external script run time[22:13:35.775] [body] normal external script run time[22:13:35.789] [body end] normal external script run time[22:13:35.789] HTML End[22:13:35.791] deferred inline script run time[22:13:35.791] deferred external script run time[22:13:35.793] DOMContentLoaded[22:13:38.144] images[0] onload[22:13:38.328] images[1] onload[22:13:39.105] images[2] onload[22:13:39.105] images[3] onload[22:13:39.106] window.onload

明らかに、JS はドキュメント フロー内の順序で厳密に実行されます。遅延スクリプトは最後に実行されます (注: Firefox 3.5 では遅延のサポートが開始され、サポートは完璧です)。

もう一度 IE8 を見てみると、結果は次のようになります:

[22:33:56.806] HTML Start[22:33:56.826] normal inline script run time[22:33:57.786] normal external script run time[22:33:57.812] deferred inline script run time[22:33:57.816] document.readyState = interactive[22:33:57.934] [body] normal external script run time[22:33:58.310] [body end] normal external script run time[22:33:58.310] HTML End[22:33:58.346] deferred external script run time[22:33:58.346] images[0].readyState = loading[22:33:58.346] images[0].readyState = complete[22:33:58.346] images[0] onload[22:33:58.361] doScroll[22:33:58.451] images[1].readyState = loading[22:33:58.479] images[1].readyState = complete[22:33:58.479] images[1] onload[22:33:58.794] images[2].readyState = loading[22:33:58.854] images[2].readyState = complete[22:33:58.854] images[2] onload[22:33:58.876] images[3].readyState = loading[22:33:58.876] images[3].readyState = complete[22:33:58.876] images[3] onload[22:33:58.887] document.readyState = complete[22:33:58.888] window.onload

IE8 では、defer は外部スクリプトに対してのみ有効であり、インライン スクリプトに対しては無効であることがわかります。さらに、DOMContentLoaded に最も近いのは doScroll であるため、DOMContentLoaded をシミュレートするために doScroll が広く使用されています。注意: これは単なるシミュレーションであり、細部が同等ではありません。

やや予期せぬ結果が得られることもあります。本体の末尾より前に配置されたスクリプトは、実行時に domready イベントに配置されるのが最適です。 Firefox であっても IE であっても、特にページが複雑な場合、HTML End まで解析しても DOM を安全に操作できるとは限りません。

上記のデータから、スタイルを上部に配置し、スクリプトを下部に配置することを推奨する YSlow パフォーマンス最適化ルールの根拠もわかります。

興味のある方は、スタイルとスクリプトを動的に追加する状況をさらにテストしてください。少し異なりますが、特別な驚きはありません。

最終概要:

ページ リソースのダウンロード順序は上から下で、ドキュメント フローで最初に表示されるリソースが最初にダウンロードされます (注: 同時実行性があります。詳細については、UA Profiler を参照してください)。特定のスタイルがダウンロードされると、そのスタイルはすぐにページにレンダリングされます (カスケード スタイル シートのレンダリングにおけるカスケードの意味を反映しています)。スクリプトがダウンロードされると、すぐに解析されて実行されます。スクリプトはドキュメント フロー内の順序で厳密に実行され、遅延スクリプトは通常のスクリプトの後に実行されます (Firefox および IE の場合)。

特別な注意を払う必要があります: スクリプトの実行中、スクリプトの下にあるすべてのリソースのダウンロードは一時停止されます (スクリプトはドキュメント フローを変更したり、ページにジャンプしたりする可能性があるため、ブラウザの一時停止ポリシーは適切です) 。インライン スクリプトには注意してください。インライン スクリプトにより、後続のダウンロードがブロックされる可能性があります。

わかりました、これ以上ナンセンスはやめてください。上記の結果を自分でテストし、繰り返しテストし、目がくらんで混乱し、突然混乱し続けていることに気づくまで狂ったようにテストすることをお勧めします...