避免阻礙渲染
原因
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。
Last updated
Was this helpful?