- Published on
連續記錄挑戰Day27-style 標籤寫在 body 後與 body 前有什麽區別
- Authors
- Name
- Penghua Chen(PH)
style 標籤寫在 body 後與 body 前有什麽區別？
將style標籤「寫於body之前」：
也就是寫在 head 標籤中，瀏覽器會依照其渲染流程。
將style標籤「寫於body中」：
會導致當樣式的加載晚於HTML加載時，造成頁面停止渲染直到樣式被加載後重新渲染頁面，而這樣子的狀況就會導致FOUC(flash of unstyled content)，造成頁面會有閃爍狀況。
將style標籤「寫於body之後」：
導致瀏覽器會等到css也加載完之後在開始渲染，而這樣子的狀況就會導致頁面會有一小段時間呈現白屏情形
結論：
將css樣式放入 head 標籤中使瀏覽器可以在此階段就完成DOM Tree和CSS rule Tree的生成，並透過 render tree將其繪製後渲染到螢幕上是最好的方法。