白屏問題
- 白屏的根本原因是瀏覽器在渲染的時(shí)候沒有請(qǐng)求到或請(qǐng)求時(shí)間過長造成的侮邀。
- 瀏覽器對(duì)于圖片和CSS念链，在加載時(shí)會(huì)并發(fā)加載（比如一個(gè)域名下同時(shí)加載多個(gè)文件）盼忌，瀏覽器對(duì)于JavaScript，在加載時(shí)會(huì)禁用并發(fā)钓账，并且阻止其后的文件及組件的下載碴犬。所以將js放在頁面的頂部也可能會(huì)導(dǎo)致白屏絮宁。
- 不同瀏覽器的處理CSS和HTML的方式是不同的：
比如梆暮，IE、chrome瀏覽器的渲染機(jī)制绍昂，采用的是等CSS全部加載解析完后再渲染展示頁面啦粹。
Firefox則是在CSS未加載前先展示html的內(nèi)容，等CSS加載后重新對(duì)樣式進(jìn)行修改窘游。
所以：白屏的出現(xiàn)情況往往因?yàn)镃SS樣式被置于底部（最后加載）,當(dāng)新窗口打開,刷新等的時(shí)候唠椭，頁面會(huì)出現(xiàn)白屏。
如果使用 @import標(biāo)簽,它引用的文件則會(huì)等頁面全部下載完畢再被加載忍饰，也可能出現(xiàn)白屏贪嫂。
因此，
css使用 link 標(biāo)簽將樣式表放在頂部艾蓝，防止白屏問題出現(xiàn)力崇。
JS 的放置位置一般是在body的閉合標(biāo)簽之前。
白屏不是bug赢织，而是由于瀏覽器的渲染機(jī)制亮靴。
FOUC
FOUC (Flash of Unstyled Content) 無樣式內(nèi)容閃爍：
如果把樣式放在底部，對(duì)于IE瀏覽器,在某些場(chǎng)景下(點(diǎn)擊鏈接,輸入U(xiǎn)RL,使用書簽進(jìn)入等),會(huì)出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面才突然展現(xiàn)出樣式)于置。對(duì)于 Firefox 會(huì)一直表現(xiàn)出 FOUC 茧吊。
- 腳本會(huì)阻塞后面內(nèi)容的呈現(xiàn)
- 腳本會(huì)阻塞其后組件的下載
對(duì)于圖片和CSS, 在加載時(shí)會(huì)并發(fā)加載(如一個(gè)域名下同時(shí)加載兩個(gè)文件)。但在加載 JavaScript 時(shí),會(huì)禁用并發(fā),并且阻止其他內(nèi)容的下載八毯。
所以盡量把 JavaScript 放入頁面body底部搓侄。
