script・css・img・iframe が読み込まれるタイミング調査

HTML の script 要素はインラインで評価(実行)されるので、
document.write() でページに HTML を追記できる。
src="" で外部 JS ファイルを指定すると、その外部 JS の読み込み中は
ブラウザの描画が止まるのは知られている。
つまり、外部 JavaScript は素早くダウンロードできる必要があり、
packer とか事前コンパイル/圧縮が重要となる。

img 要素の画像は、一般にページ描画開始後に非同期で表示される。

iframe や、css (link) はどうだろう?と思って、確認してみました。

Firefox 3.5.5 (Mac) の結果




最初に、HTML 内の全ての script, css を並列に読み込む。
script, css の優先順位はなく、HTML の記述順に従う。
head 内、body 内どちらにある script も待たずにリクエストする。

全ての script, css の取得を待ってから、iframe, img 要素を並列に読み込む。
iframe, img の優先順位はなく、HTML の記述順に従う。
レスポンスを取得した順に表示していく。

※ IE8 (Win) も同じ手順でした。

Safari 4.0.4 (Mac) の結果




最初に、HTML 内の全ての script, css を並列に読み込む。
まず、head 内の script, css が読み込まれ、
head 内の全ての読み込みが完了した後に body 内の script を読み込む。

HTML 内の全ての script を待ってから、次に img を読み込む。
そして全ての img が終わったら、最後に iframe を読み込む。

※ Chrome 3.0 (Win) も同じ手順でした。

まとめ


どのブラウザも、head 内の css は、ページ描画前に読み込む。
(→ だから、css は速くダウンロードできる必要がある)

script は、img・iframe の取得前に読み込む。
IE/Firefox では、head 内・body 内の script を並列で読み込むのに対して、
Safari/Chrome では、head 内の script のみ並列に読み込み、それが完了してから、
body 内の script を並列に読み込む。(→ 何で分けてるのだろう??)

HTML 内の全ての script の読み込みが完了してから、img を並列に読み込む。
IE/Firefox は img と iframe を区別なく並列に読み込むのに対して、
Safari/Chrome は img のみを並列に読み込んでから、最後に iframe のみを並列に読み込む。
(→ つまり、iframe はかなり遅く描画される場合がありうる)

また、(4つ以下の)iframe を並べたとき、並列(同時)にリクエストされ、
非同期に表示されるので、1つの iframe レスポンスが遅くても他の描画に影響は出ない。
script は並列(同時に)にダウンロードされるが、評価(実行)されるのは順序通りで、
1つの script レスポンスが遅いと、img も読まれずページ全体の表示に影響する。

備考


・body 内の css を試してなかった。普通、head 内に書くよね?
・JavaScript で DOM 操作して動的に要素を追加した場合のタイミングは考慮していません。

この記事へのコメント

この記事へのトラックバック