避免阻礙渲染

原因

CSS 檔案的載入與 CSSOM

當 HTML 遇上 <script> 標籤時，會阻礙剖析，立刻進行 javascript 檔案的下載與解析執行。

解法

1. 儘早建立CSSOM。

樣式要在 <head> 執行，避免非必要的檔案下載所導致的阻塞。

將第一頻必須使用的樣式直接使用 <style> 執行，避免等待傳輸。

2. 避免使用CSS @import ，會迫使必須先下載才能剖析，使得無法平行下載，減慢生成速度。 3. <script> 放在 body 結束前，避免暫停 HTML parser 的進行，避免阻礙進行。 4. <script> 使用屬性：

  • async: 在背景下載，下載完成後會暫停 HTML parser 的進行。

  • defer: 在背景下載，但在下載完成後不會馬上執行，而是待 paser 完成後，才執行JS。

Previous效能優化Next減少網路請求

Last updated

Was this helpful?