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仍在解析时，我可以放置这两个东西。再次感谢任何指针！

- Uri Chandler

---

通常不建议使用 document.write() ；-) - Ja͢ck

document.write() 可以在 DOM 加载时使用，但 appendChild() 则需要事件触发才能生效。你可以使用 JavaScript 事件（如 click、load）来触发 appendChild(s)。 - Girish

Firefox 不允许执行 document.write 操作，因为它被视为不安全的操作。 - simar

Answer 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 加载。

需要注意的重要事项是执行顺序。正如 Jack 在评论中指出的那样，使用 document.write 是不被赞同的。如果您的脚本不位于 html 文档的末尾，这是正确的，因为它会阻止网页的呈现。但如果您的脚本位于底部，我不确定是否仍然是这种情况。

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

- Question Overflow

---

我在自己的测试中得出了同样的结论。感谢您发布您的发现！ - Uri Chandler

我不同意它被看作是不好的。只有在阻塞DOM的情况下，document.write才会被看作是不好的。如果使用正确，它是一种完全可行的控制脚本执行顺序的方法。当然，这仅在遵循其他最佳实践时才有效，即将脚本加载到页面底部。 - Nilpo

Answer 2

document.write() 会在执行它的文档中写入内容。
而 appendChild 则将元素添加到指定的元素中。

- Vicky Gonsalves

---

document.write() 不会覆盖您的文档。 - RickyA

document.write() 会将内容追加到它被执行的位置。 - Daniel W.