白屏和 FOUC
FOUC指無樣式內(nèi)容閃爍暖混，白屏指頁面會(huì)出現(xiàn)白屏战坤；
它們主要是由于不同瀏覽器處理莲镣，對(duì)于某些場景福稳，處理的方式不同；比如如果把樣式放在底部剥悟，
等待CSS加載需要時(shí)間灵寺，瀏覽器可以選擇，HTML文檔直接執(zhí)行渲染区岗，逐步加載無樣式的內(nèi)容略板，等CSS加載后頁面突然展現(xiàn)樣式，這就是無樣式內(nèi)容閃爍慈缔；
也可以等待CSS加載完成叮称，才開始渲染頁面，即頁面會(huì)出現(xiàn)一段時(shí)間白屏。
所以一般將CSS放在HTML頭部位置瓤檐。
注意赂韵；
- 使用@import標(biāo)簽，即使CSS放入鏈接挠蛉，并且放在頭部祭示，也可能出現(xiàn)白屏；
- 另外谴古，如果不將JS放在底部质涛，當(dāng)沒有延遲或異步，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本
- 立即”指的是在渲染該腳本標(biāo)簽之下的文檔元素之前掰担，也就是說不等待后續(xù)載入的文檔元素汇陆，讀到就加并執(zhí)行。
- 且只有執(zhí)行完之后带饱，才會(huì)渲染后面的文檔毡代，JavaScript放入頁面頂部也可能會(huì)導(dǎo)致白屏現(xiàn).
異步加載腳本
通過defer和async 可以使后續(xù)文檔元素的加載渲染過程，與js腳本加載與執(zhí)行勺疼，并行進(jìn)行教寂，這就是異步加載；
若無defer 或 async恢口，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本孝宗，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素耕肩，讀到就加載并執(zhí)行因妇，這就是同步，
它的影響就是只有這個(gè)腳本執(zhí)行完成之后猿诸，后面的文檔才能進(jìn)行渲染婚被；異步就無此副作用。
defer與async的區(qū)別：
defer要等到整個(gè)頁面在內(nèi)存中正常渲染結(jié)束（DOM 結(jié)構(gòu)完全生成梳虽，以及其他腳本執(zhí)行完成）址芯，才會(huì)執(zhí)行；
async一旦下載完窜觉，渲染引擎就會(huì)中斷渲染谷炸，執(zhí)行這個(gè)腳本以后，再繼續(xù)渲染禀挫。
一句話旬陡，defer是“渲染完再執(zhí)行”，async是“下載完就執(zhí)行”语婴。
另外描孟，如果有多個(gè)defer腳本驶睦，會(huì)按照它們?cè)陧撁娉霈F(xiàn)的順序加載，而多個(gè)async腳本是不能保證加載順序的匿醒。
使用范例：
<script async src="script.js"></script>
script defer src="script.js"></script>
范例
通過寫一個(gè) server场航，驗(yàn)證白屏和 Fouc效果
- 第一步
node index.js
- 第二步
在瀏覽器中打開 http://localhost:8080/public/index.html
- 第三步
修改 index.html 里面的引入的文件鏈接，加上參數(shù) t=秒數(shù)廉羔，如
<script src="a.js?t=3"></script
表示延遲3秒加載 a.js
