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