javascript - document.write 在 chrome 和 firefox 中的不一致行为

Question

问题

在执行多个 document.write 时，我注意到它们不会立即修改 DOM。第一个 document.write 立即执行，而其他人对 DOM 的影响仅在 <script> 结束时可见堵塞。在我测试的 Chrome 中，它给出了以下结果。但是在 Firefox 中，如果我只是让这段代码运行，结果与 Chrome 相同，但当我一次单步执行代码时，结果不同(见下文)。有人可以解释这种行为吗？

代码

<script>  
    document.write("<script src='test.js'>" + "</" + "script>");  
    console.log(document.scripts.length);  
    document.write("<script src='test2.js'>" + "</" + "script>");  
    console.log(document.scripts.length);  
    document.write("<script src='test3.js'>" + "</" + "script>");  
    console.log(document.scripts.length);
</script>

Chrome(v.41) 日志

2
2
2

Firefox(v.36) 日志(单步执行开发工具中的代码时)

2
3
4

更新

DOM 中的原始脚本数量为 1(上面编写的内联脚本)。 Chrome 在第一次 document.write 之后更新了 DOM，但在那之后等待。这被认为是 buggy 行为吗？

Answer 1

我找不到关于它的官方文档，但是做了一些测试我注意到一旦脚本的源 url 得到响应，浏览器就会将这些脚本附加到文档中(第一个除外)

document.write("<script src='a.js'>" + "</" + "script>");  
console.log(document.scripts.length);
document.write("<script src='b.js'>" + "</" + "script>");  
console.log(document.scripts.length);
document.write("<script src='c.js'>" + "</" + "script>");
console.log(document.scripts.length);

document.onreadystatechange = function() {
	if (document.readyState == "complete") {
		console.log('Complete: '+document.scripts.length+' scripts found')
	}
}

从 Chrome 控制台你应该看到这样的东西

但如果没有源代码，它会立即加载脚本

document.write("<script>" + "</" + "script>");  
console.log(document.scripts.length);
document.write("<script>" + "</" + "script>");  
console.log(document.scripts.length);
document.write("<script>" + "</" + "script>");
console.log(document.scripts.length);

此外，我还注意到，如果只有一个 <script>已定义源，以下脚本(即使没有源)也不会附加到文档中，直到采取响应为止

document.write("<script>" + "</" + "script>");  
console.log(document.scripts.length);
document.write("<script src='a.js'>" + "</" + "script>");  
console.log(document.scripts.length);
document.write("<script>" + "</" + "script>");
console.log(document.scripts.length);

但是添加 async至 <script>将解决问题

document.write("<script src='a.js' async>" + "</" + "script>");  
console.log(document.scripts.length);
document.write("<script src='b.js' async>" + "</" + "script>");  
console.log(document.scripts.length);
document.write("<script src='c.js' async>" + "</" + "script>");
console.log(document.scripts.length);

document.onreadystatechange = function() {
	if (document.readyState == "complete") {
		console.log('Complete: '+document.scripts.length+' scripts found')
	}
}