CSS 和 JS 放置順序, 異步機(jī)制
使用 link 標(biāo)簽將樣式表放在頂部
-
將JS放在底部
- 腳本會阻塞后面內(nèi)容的呈現(xiàn)(并沒有阻塞請求)
- 腳本會阻塞其后組件的下載
對于圖片和CSS, 在加載時會并發(fā)加載(如一個域名下同時加載兩個文件). 但在加載 JavaScript 時,會禁用并發(fā),并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁面頂部也會導(dǎo)致 白屏 現(xiàn)象.
白屏&FOUC (Flash of Unstyled Content) 無樣式內(nèi)容閃爍
白屏&FOUC是不同的瀏覽器對資源加載,頁面渲染的不同處理方式而出現(xiàn)的兩種現(xiàn)象
比如Google Chrome的處理機(jī)制就是白屏,Firefox的處理機(jī)制就是無樣式內(nèi)容閃爍
白屏
打開頁面瞬間,頁面一片白色,過會出現(xiàn)內(nèi)容,出現(xiàn)白色的這段時間就是白屏FOUC (Flash of Unstyled Content) 無樣式內(nèi)容閃爍
打開頁面,出現(xiàn)樣式或純文本,但過了一會頁面閃爍(刷新),樣式出現(xiàn)變化
異步加載
- 1 默認(rèn)
<script src="script.js"></script>
沒有 defer 或 async铐殃，瀏覽器會立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前浪南，也就是說不等待后續(xù)載入的文檔元素谎懦，讀到就加載并執(zhí)行达传。
- 2 async
<script async src="script.js"></script>
有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。
- 3 defer
<script defer src="script.js"></script>
有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步）门岔，但 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成烤送。
defer:腳本延遲到文檔解析和顯示后執(zhí)行寒随，有順序
async:不保證順序
