为什么使用document.write会影响网页性能？

Question

有人告诉我在网页中应该避免使用 document.write，因为它会影响网页性能。但是具体原因是什么呢？

- Morgan Cheng

Answer 1

document.write() 在大多数浏览器中似乎对页面性能并不会造成太大的影响。事实上，我在 DHTML Kitchen 进行了一些测试，在 Firefox、Opera 和 Chrome 中发现，document.write() 在首次加载时实际上更快，并且在后续刷新时与标准 HTML 的速度相当。Internet Explorer 8 是一个例外，但它在呈现 HTML 方面实际上比其他浏览器更快（出人意料）。

正如Guffa的答案所指出的，以及我正在构建的，实际的性能问题来自于内联脚本本身。只有当内联脚本执行完成时，内容渲染才能继续进行，因此，如果您在内联脚本中具有复杂的例程，您可以明显地停止页面的加载。这就是为什么等待 onload / DOMReady 并使用 DOM 操作是首选的原因。

特别不明智的是在文档加载完成后使用 document.write()。在大多数浏览器中，文档加载完成后使用 document.write() 还意味着 document.open()，它会抹掉屏幕上的当前 HTML，并创建一个新文档。

这并不意味着 document.write() 没有其用处，只是大多数开发人员使用它的原因错误。实际上 document.write() 的一些问题包括：

• 您无法在作为 XHTML 提供的文档中使用它（对于正确解析 XHTML 为 XHTML 的浏览器而言）。
• 在 DOM 解析完成后使用时将覆盖整个页面。
• 向页面添加内容，在禁用 JavaScript 的浏览器中是不可访问的（虽然 <noscript> 有时是有效的解决方法）。
• 比静态 HTML 更难以维护。

- Andy E

Answer 2

如果在页面中运行了脚本，浏览器就必须等到脚本运行完毕后才能继续解析页面的其余内容。为了让您的页面快速显示，您希望浏览器尽早解析页面以便向用户展示，随后再应用脚本所增加的额外功能。

- Guffa

---

我想补充一点，每次通过document.write()插入新的HTML时，整个页面都会被重新解析，包括整个CSS级联和其他所有内容。 - Robusto

这适用于任何脚本，不仅限于 document.write。 - Felix Kling

@Robusto：嗯...整个页面不能再次解析。由于在解析页面时使用了document.write，因此解析尚未完成... - Guffa

@Robusto：就像Guffa所说的那样。CSS重绘也适用于操作DOM。 - Andy E

Answer 3

我认为有一些理由应该避免这种情况。

但是你的意思是，如果你在HTML代码中的某个地方有一个

<script>
 document.write('mystuff')
</script

其中一个问题是，在浏览器能够显示您的网站之前，它必须加载JavaScript解释器。 如果您只通过body.onLoad启动JavaScript，则可以向用户显示整个网站，然后运行您的JavaScript脚本... 因此

主观加载时间更快:-)

- cRichter