推测解析

传统上，浏览器中的 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> 很糟糕。