web-dev-qa-db-ja.com

document.writeとappendChild

スクリプトをページに追加する次の2つの方法の間で、ロード\実行時間に違いはありますか？

<script>
document.write('<script src=someScript.js></script>');
</script>

対これ：

<script>
var s=document.createElement('script');
s.src='someScript.js';
document.body.appendChild(s);
</script>

両方がページの同じ場所（終了bodyタグの前）に追加されていると仮定します。

どんな情報でも大歓迎です！

編集：コメントと回答をありがとうございます。私は実際にロード時間や実行の違いに関する特定の情報を探しています（もしあれば？）。また、DOMがまだ解析されている間に両方を配置できます。これについてのポインタをありがとう！

javascriptdocument.write
16
Uri Chandler

同じことを研究しているときに私はこれに出くわしました。いくつかのテストの後、はい、これら2つの方法の間にメジャーの違いがあると結論付けました。最近のブラウザでは、これはロード時間や実行時間ではなく、スクリプトが評価される順序に関係します。たとえば、次の場合です。

someScript.js

console.log('2');

index1.htm

<script>
console.log('1');
 var script = document.createElement('script');
 script.src = 'someScript.js';
 document.write(script.outerHTML);
</script>
<script>
console.log('3');
</script>

index2.htm

<script>
console.log('1');
 var script = document.createElement('script');
 script.src = 'someScript.js';
 document.body.appendChild(script);
</script>
<script>
console.log('3');
</script>

コンソールでindex1.htmを実行すると、シーケンス「1、2、3」が表示されます。 index2.htmlを実行すると、代わりに「1、3、2」というシーケンスが表示されます。要求されている外部スクリプトがある場合、これらは両方のメソッドで動的に要求されたsomeScriptよりも先にロードされます。

注意すべき重要なことは、実行の順序です。ジャックがコメントで述べたように、document.writeの使用は嫌われています。これは、スクリプトがhtmlドキュメントの最後にない場合に当てはまります。これは、スクリプトがWebページのレンダリングをブロックするためです。スクリプトが一番下にある場合でも、これが当てはまるかどうかはわかりません。

それでも、コールバック関数を使用して、JavaScriptの実行で順序を強制することができます。

11
Question Overflow

document.write()は、実行されるドキュメントに書き込みます。
一方、appendChildは指定された要素に要素を追加します。

4
Vicky Gonsalves