javascript - document.write 与 appendChild

Question

以下两种向页面添加脚本的方式在加载\执行时间上是否存在差异？

<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 仍在解析时放置两者。再次感谢您对此的任何指点!!

Answer 1

我在研究相同内容时遇到了这个问题。经过一些测试后，我得出结论，是的，这两种方法之间存在主要差异。在现代浏览器上，这与其说是加载或执行时间，不如说是脚本被评估的顺序。例如，如果您有以下内容:

一些脚本.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 之前加载。

需要注意的重要一点是执行顺序。正如 jack 在评论中指出的那样，使用 document.write 是不受欢迎的。如果您的脚本不在 html 文档的末尾，这是正确的，因为它会阻止您的网页呈现。我不太确定，如果您的脚本位于底部，情况是否仍然如此。

尽管如此，您仍然可以使用回调函数来强制执行 javascript 的顺序。