推测性解析
传统上,在浏览器中,HTML 解析器在主线程上运行,并在遇到 </script> 标签后被阻塞,直到脚本从网络中获取并执行完毕。一些 HTML 解析器,例如 Firefox 4 以来的 Firefox,支持在主线程之外进行推测性解析。它在脚本下载和执行的同时向前解析。HTML 解析器会对其在流中提前发现的脚本、样式表和图像启动推测性加载,并推测性地运行 HTML 树构建算法。好处是,当推测成功时,无需重新解析文件中已经扫描过脚本、样式表和图像的部分。缺点是,当推测失败时,会丢失更多的工作。
本文档可帮助您避免那些导致推测失败并减慢页面加载速度的事情。
为了使链接脚本、样式表和图像的推测性加载成功,请避免使用 document.write。如果您使用 <base> 元素来覆盖页面的基本 URI,请将该元素放在文档的非脚本部分。不要通过 document.write() 或 document.createElement 添加它。
避免丢失树构建器输出
当 document.write() 改变树构建器状态,使得 </script> 标签之后的推测性状态在所有由 document.write() 插入的内容被解析后不再成立时,推测性树构建就会失败。然而,只有不寻常的 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>是可以的。 - 请注意,写入平衡的标签可能会导致以一种使写入不平衡的方式推断出其他标签。例如,
head元素内部的<script>document.write("<div></div>");</script>将被解释为<script>document.write("</head><body><div></div>");</script>,这是不平衡的。 - 不要格式化表格的一部分。
<table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table>是不好的。