瀏覽器的渲染機(jī)制解析
- 解析HTML標(biāo)簽励七，構(gòu)建DOM樹
- 解析CSS標(biāo)簽贤斜，構(gòu)建CSSOM樹
- 把DOM和CSSOM組合成渲染樹
- 在渲染樹的基礎(chǔ)上進(jìn)行布局嫂便，計算每個節(jié)點的幾何結(jié)構(gòu)
- 把每個節(jié)點繪制到屏幕上
可能會出現(xiàn)的問題
白屏現(xiàn)象
定義：
如果把樣式放在底部浩蓉，對于IE瀏覽器恢暖，在某些場景下(新窗口打開运褪，刷新等)頁面就會出現(xiàn)白屏惊楼，而不是內(nèi)容的局部展現(xiàn)。如果使用 @import 標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏秸讹。
出現(xiàn)的原因
1.上文中說到了瀏覽器的渲染機(jī)制檀咙，由于在一般情況下，Chrom瀏覽器和IE瀏覽器(某些場景下)是將HTML解析為DOM樹璃诀，將CSS解析為CSSOM樹再組合成渲染樹弧可。我們將CSS的link標(biāo)簽放到</body>的上面的時候，瀏覽器已經(jīng)解析完了HTML標(biāo)簽文虏，這是他又碰到了Link標(biāo)簽侣诺，所以他需要將DOM樹毀掉重新建立一個DOM樹殖演。
2.對于圖片和CSS, 在加載時會并發(fā)加載(如一個域名下同時加載兩個文件). 但在加載 JavaScript 時,會禁用并發(fā),并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁面頂部也會導(dǎo)致白屏現(xiàn)象.
FOUC
定義
如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進(jìn)入等),會出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式).對于 Firefox 會一直表現(xiàn)出 FOUC。
出現(xiàn)的原因
出現(xiàn)的原因也是由于瀏覽器的渲染機(jī)制年鸳，但是和Chrom瀏覽器不同趴久，firefox和IE(某些場景下)，他們是解析到了一個最子節(jié)點搔确，這個節(jié)點下面沒有其他內(nèi)容了彼棍，就立刻查找CSSOM樹，畫出這個節(jié)點(由于我們把link標(biāo)簽放到了后面膳算，所以他找不到我們寫的樣式表座硕，只加載自己的默認(rèn)樣式)，等到最后加載到了link標(biāo)簽之后涕蜂，他需要從頭再繪制渲染樹华匾，所以出現(xiàn)FOUC現(xiàn)象。
避免出現(xiàn)上述問題
CSS引入方式
將Link標(biāo)簽放在head內(nèi)部机隙，一邊加載css文件一邊構(gòu)建DOM樹
JavaScript引入方式
- 將Script標(biāo)簽放在body的底部蜘拉，也就是</body>的上方
- 在head中引入script標(biāo)簽，在上async或defer屬性
async：加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）有鹿。
defer：加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步）旭旭，但 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成葱跋。
兩種解決方法均可
