Firefox开发者:document.write()使用不当导致网页解析错误
作者:admin 时间:2013-10-21 11:19:31 浏览:我们在编写html代码时，有时会通过js来操作html，document.write()的使用率还是挺高的。不过，通过今天的发现，看了Firefox开发者的一篇文章之后，了解到原来document.write()是不可以随便写，在使用document.write()时需要注意一些事项，否则会引起解析器对标签的错误解析，从而延长网页的加载时间。
document.write() 写入不平衡 造成解析错误
今天在用firefox控制台调试网页时，发现两条js的错误，显示如下：
[11:33:46.227] 利用 document.write() 写入不平衡树引发来自网络的数据被重新解析。更多信息参见 https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing @ http://www.webkaka.com/:174
[11:33:52.295] 利用 document.write() 写入不平衡树引发来自网络的数据被重新解析。更多信息参见 https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing @ http://www.webkaka.com/:1228
根据提示，我找到对应的js代码：
第一条是这样写的
<table>
<script language=javascript >
document.write ("<tr><td>文章列表一</td></tr>");
document.write ("<tr><td>文章列表二</td></tr>");
</script>
</table>
第二条是这样写的
document.write("文章列表一");
firefox认为我这样的document.write() 写入不平衡，从而造成推断解析错误。
下面看看Firefox开发者是怎样说的。
优化你的网页推测解析
传统的浏览器中，HTML解析器在主线程上运行，当遇到</ SCRIPT>标记时会被锁定，直到脚本已经执行成功。HTML解析器在Firefox 4及更高版本支持推断性的解析，它能提前解析正在下载的脚本并执行它。Firefox 4及更高版本的HTML解析器也运行HTML树构造算法推测。有利的一面是，当一个推挡解析成功，就没有必要重新分析已经被扫描过的脚本、样式表和图像文件的传入部分。缺点是，当一个推测解析失败时，会有更多的工作丢失。
此文档可以帮助你避免推测失败，减缓你的页面加载的那些东西。
使推测成功加载
只有一条规则使推测加载链接脚本、样式表和图标成功：
● 如果使用<base>元素覆盖你的网页基本URI，把元素放到文档的非脚本部分，不要通过document.write()或document.createElement()方法添加它。
避免失去树构建输出
当document.write()改变树结构状态时，推测树构建就会失败，以至当所有内容通过document.write()解析并插入后，推测状态在</script>标签之后将不再保留。然而只有不正确使用document.write()才会遇到问题，我们可以避免它：
● 不要写不平行的树，
<script>document.write("<div>");</script>
是不对的，
<script>document.write("<div></div>");</script>
是正确的。
● 不要写一个未完成的标记，
<script>document.write("<div></div");</script>
是不对的。
● 不要使用回车来结束
<script>document.write("Hello World!\r");</script>
是不对的
<script>document.write("Hello World!\n");</script>
是正确的。
● 注意写均衡的标签可能导致其他标签被推断的方式，使写不平衡。例如
<script>document.write("<div></div>");</script>
在head元素里将被解释为
<script>document.write("</head><body><div></div>");</script>
这是不平行的。
● 不要格式化表的一部分
<table>
<script>document.write("<tr><td>Hello World!</td></tr>");</script>
</table>
是不对的。然而，
<script>document.write("<table><tr><td>Hello World!</td></tr></table>");</script>
是没有问题的。
标签: document.write
- 站长推荐
