白屏問題
如果把樣式放在底部，對于IE瀏覽器，chrome等（css全部加載后再呈現(xiàn),有可能等待長），在某些場景下(新窗口打開，刷新等)頁面會出現(xiàn)白屏，而不是內(nèi)容逐步展現(xiàn)。使用 @import 標(biāo)簽，即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏。
對于圖片和CSS, 在加載時會并發(fā)加載(如一個域名下同時加載兩個文件)。 但在加載 JavaScript 時，會禁用并發(fā)，并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁面頂部也會導(dǎo)致 白屏 現(xiàn)象.
解決方法
- CSS：一般將css放置head里用style包裹，也可以使用link標(biāo)簽引入。
- JS：一般放置body標(biāo)簽的尾部
- async : 加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。
- defer:加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但是script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。
FOUC：
Flash of Unstyled Content "無樣式內(nèi)容閃爍“：有些瀏覽器是邊渲染邊呈現(xiàn)，CSS放置body標(biāo)簽底部，會出現(xiàn)加載html結(jié)束后才一次性加載css樣式，從而導(dǎo)致頁面閃爍。
