为什么document.write会损害Web性能?

Mor*_*eng 13 javascript performance

我被告知应该在网页中避免使用document.write,因为它会损害网页性能.但究竟是什么原因呢?

And*_*y E 15

document.write()在大多数浏览器中,它本身对页面性能似乎没有什么害处.事实上,我在DHTML Kitchen进行了一些测试,发现在Firefox,Opera和Chrome中,document.write()在第一次加载时实际上更快,并且在后续刷新时与标准HTML的速度相当.Internet Explorer 8是个例外,但实际上它在呈现HTML时比其他浏览器更快(令人惊讶).

正如Guffa的回答指出的那样,以及我正在构建的内容,实际的性能问题来自内联脚本本身.内联呈现只能在内联脚本执行完毕后才能继续,因此如果在内联脚本中有一个complexe例程,则可以显着停止页面对最终用户的加载.这就是为什么等待onload/ DOMReady并使用DOM操作的首选.

在文档加载完成后使用document.write()尤其不明智.在大多数浏览器中,在文档加载后使用document.write()也意味着document.open(),它将从屏幕上擦除当前的HTML并创建一个新文档.

这并不意味着document.write()没有它的用​​途,只是大多数开发人员出于错误的原因使用它.document.write()的实际问题包括:

  • 您不能在用作XHTML的文档中使用它(对于将XHTML正确解析为XHTML的浏览器).
  • 在DOM解析完成后使用时覆盖整个页面.
  • 将内容添加到禁用JavaScript的浏览器无法访问的页面(尽管<noscript>这里有时是一种有效的解决方法).
  • 比静态HTML更难维护.


Guf*_*ffa 6

如果您有在页面中间运行的脚本,则浏览器必须等待脚本完成才能继续解析页面的其余部分.

为了使您的页面快速显示,您希望浏览器尽快解析页面以便可以向用户显示,然后您可以应用脚本添加的额外功能.

  • 我想补充说,每次通过document.write()插入新的HTML时,整个页面都会被再次解析,整个CSS级联以及其余所有内容. (2认同)
  • @Robusto:嗯...整个页面无法再次解析.由于在解析页面时使用`document.write`,解析还没有完成...... (2认同)