推測性解析

傳統上,在瀏覽器中,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> 是不好的。