Firefox 报错: 利用 document.write() 写入不平衡树引发来自网络的数据被重新解析

原创 tiangr  2016-10-26 12:13  阅读 310 次

我们在编写html代码时,有时会通过js的document.write()来操作html。不过在使用document.write()时需要注意一些事项,否则会引起解析器对标签的错误解析,从而延长网页的加载时间。

document.write() 写入不平衡 造成解析错误

我在开发JS统计代码的时候,使用document.write将请求写入到图片标签的src属性中,当这段代码被加在头部<head>标签的最上方,Firefox会报如下错误:

利用 document.write() 写入不平衡树引发来自网络的数据被重新解析。更多信息参见 https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing

依据Firefox开发者文档 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing,在传统的浏览器中,HTML 解析器运行于主线程之中,并且在遇到 </script> 标签后会被阻塞,直到脚本从网络中被获取和执行。 Firefox 4 和后续的版本支持从主线程中分离的预解析技术。 当脚本在获取和执行的过程中,预解析技术能提前解析HTML文档。

注意写均衡的标签可能导致其他标签被推断的方式,使写不平衡。

因此,直接在head标签里使用document.write来添加图片会导致文档树预解析失败。

  1. <script>document.write("<div></div>");</script>

在head元素里将被解释为

  1. <script>document.write("</head><body><div></div>");</script>

解决办法:

  1. 尽量把javascript标签放在body标签下。
  2. 将输出img标签换成输出script标签。
特别提示:本站资源全部免费下载,因服务器需经费维护,文中部分外链点击后会进入广告,请耐心等待5秒即可跳过广告进入目标页面。如遇页面外链打不开或下载地址失效,您可以在评论中指出错误,或扫描页面底部二维码。
本文地址:http://www.tiangr.com/firefox-bao-cuo-li-yong-document-write-xie-ru-bu-ping-heng-shu-yin-fa-lai-zi-wang-luo-de-shu-ju-bei-chong-xin-jie-xi.html
版权声明:本文为原创文章,版权归 tiangr 所有,欢迎分享本文,转载请保留出处!

发表评论


表情