A Day in the Life

document.write の中に埋め込んだ script タグ

document.write の中に埋め込んだ script タグ

document.write の中に埋め込んだ script タグの挙動が google chrome で気になったことがあるので調べてみた。↓こういうやつね。

document.write('');

全般

document.write(スクリプトタグ) と、document.write(code) が、同一の script タグ内部に記述されている場合、document.write(code)が優先される。別の script タグの場合は、最初の script タグの document.write の処理がすべて終わった後に、次の script タグが実行される。つまり、document.write が記述された script タグ内部では、外部 script のロードはブロックしない。

document.write('<script type="text/javascript" charset="utf-8" src="/xxx">'); // 次に処理される
document.write('my code'); // こっちが最初に実行される


document.write('my code2'); // 最後に実行される

google chrome 2.0.172.30 / Firefox 3.5 beta4 / Win Safari 4 Beta / IE 6,8

同一の script タグ内部での document.write の script タグ書き込みによる処理は、並列で http の取得を行う。たぶん 1 ドメインあたり4並列ぐらいな感じ。別のドメインに分けると、さらに並列度が増す。

また、このときの http の並列取得は、順番に行われるわけでない(最初のコネクションが並列なら、順番にする意味ないしね)。eval 的な JS の実行処理はきちんと順番に行われる。

Firefox 3.0.10

直列で http の取得処理を行うので、他のブラウザに比べ遅さが顕著。ただ、実際に同一タグ内での document.write による script タグ書き込みはあまり使われていない気がするので、遅いと感じる場面に遭遇することがあまりなさそうな気もする。

解らなかった

巨大な HTML / 様々な画像等をロードしているページなんかの場合、途中で document.write での script タグ書き込みがある場合、Google Chrome では document.write がブロックしないことがよくあった。速度向上のため、なにかを指標にして、document.write が非同期でよさそうなら非同期にしていたりするのかぁ…。

以下サンプルに使ったスクリプト(役に立たないとは思う)

記事の一覧 >