Kawanet Blog II

アクセスカウンタ

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

<<   作成日時 : 2009/11/15 06:10   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 31 / トラックバック 0 / コメント 0

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 操作して動的に要素を追加した場合のタイミングは考慮していません。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 31
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
面白い 面白い 面白い 面白い 面白い
驚いた 驚いた
ナイス ナイス
かわいい かわいい

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
script・css・img・iframe が読み込まれるタイミング調査  Kawanet Blog II/BIGLOBEウェブリブログ
文字サイズ:       閉じる