【问题标题】:document.write vs appendChilddocument.write 与 appendChild
【发布时间】:2014-03-04 12:56:58
【问题描述】:

以下两种添加脚本到页面的方式在加载\执行时间上是否有区别?

<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 标记之前)。

感谢任何信息!

编辑:感谢大家的cmets和答案。我实际上正在寻找有关加载时间和\或执行差异的具体信息(如果有的话?)。此外,我可以在 DOM 仍在解析时放置两者。再次感谢您对此的任何指点!

【问题讨论】:

  • 使用document.write() 通常是不受欢迎的 ;-)
  • document.write() 可用于 DOM 加载,但 appendChild() 可用于事件,您可以将 appendChild(s) 用于 javascript 事件,例如 clickload
  • firefox 不允许执行 document.write 作为不安全操作

标签: javascript document.write


【解决方案1】:

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

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 文档的末尾,这是正确的,因为它会阻止您的网页呈现。我不太确定,如果您的脚本位于底部,是否仍然如此。

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

【讨论】:

  • 实际上我在自己的测试中得出了相同的结论。感谢您发布您的发现!
  • 我不同意它不受欢迎。 Document.write 只有在以阻塞 DOM 的方式使用时才会受到反对。如果使用得当,它是控制脚本执行顺序的一种完全可行的方法。当然,这仅在遵循其他最佳实践时才有效,即在页面底部加载脚本。
【解决方案2】:

document.write() 写入执行它的文档中。
appendChild 将元素附加到指定元素。

【讨论】:

  • document.write() 不会 overwrite 您的文档。
  • document.write() 附加到它执行的位置
猜你喜欢
  • 1970-01-01
  • 2019-05-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-10-27
  • 2013-04-02
  • 1970-01-01
相关资源
最近更新 更多