以下两种向页面添加脚本的方式之间的加载\执行时间是否存在差异?
<script>
document.write('<script src=someScript.js></script>');
</script>
vs this:
<script>
var s=document.createElement('script');
s.src='someScript.js';
document.body.appendChild(s);
</script>
假设两者都添加在页面上的相同位置(在结束正文标记之前)。
感谢任何信息!
编辑:感谢所有评论和回答。我实际上是在寻找有关加载时间和\或执行差异的具体信息(如果有的话)。此外,我可以在DOM仍然被解析时放置两者。再次感谢您对此的任何指示!!
答案 0 :(得分:11)
我在研究同样的时候遇到过这个问题。经过一些测试,我得出结论,是的,这两种方法之间存在主要差异。在现代浏览器中,这不仅仅是加载或执行时间,而是评估脚本的顺序。例如,如果您有以下内容:
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
将为您提供序列&#34; 1,2,3和#34;。运行index2.html将为您提供序列&#34; 1,3,2&#34;代替。如果有外部脚本被请求,这些将在两个方法的动态请求someScript
之前加载。
需要注意的重要事项是执行顺序。正如杰克在评论中指出的那样,使用document.write
是不受欢迎的。如果您的脚本不在html文档的末尾,则会发生这种情况,因为它会阻止您的网页呈现。我不太确定,如果你的脚本在底部仍然如此。
尽管如此,您仍然可以使用回调函数来强制执行javascript。
答案 1 :(得分:4)
document.write()
在执行文件的位置写入
而appendChild
将元素追加到指定的元素。