CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
CSS一般放置在HTML的head標(biāo)簽中,JS一般放置在HTML的最后也就是body標(biāo)簽的末端。
白屏和FOUC
由于JS腳本會(huì)阻塞后面內(nèi)容的呈現(xiàn)；腳本會(huì)阻塞其后組件的下載；從而造成：
- 白屏：
當(dāng)把JS放置在HTML和CSS前面的時(shí)候，瀏覽器會(huì)馬上請(qǐng)求JS文件并執(zhí)行，同時(shí)停止HTML和CSS的渲染；從而造成白屏現(xiàn)象。
如果使用@import標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏。 - FOUC：
FOUC無樣式內(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。
網(wǎng)頁的渲染機(jī)制
- 解析HTML標(biāo)簽,構(gòu)建DOM樹
- 解析CSS標(biāo)簽, 構(gòu)建CSSOM樹
- 把DOM和CSSOM組合成 渲染樹(render tree)
- 在渲染樹的基礎(chǔ)上進(jìn)行布局, 計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)
- 把每個(gè)節(jié)點(diǎn)繪制到屏幕上(painting)
