一、渲染過程
- 處理HTML標(biāo)記數(shù)據(jù)并生成DOM樹。
- 處理CSS標(biāo)記數(shù)據(jù)并生成CSSOM樹。
- 將DOM樹與CSSOM樹合并在一起生成渲染樹。
- Layout（布局）：計算每個 DOM 元素在最終屏幕上顯示的大小和位置。
- Paint（繪制）：在多個層上繪制 DOM 元素的的文字、顏色、圖像、邊框和陰影等。
布局和繪制涉及到兩個名詞: reflow(重排/回流)和repain(重繪)。頁面在首次加載時必然會經(jīng)歷reflow和repain
- composite（渲染層合并）：按照合理的順序合并圖層然后顯示到屏幕上。
圖一也叫做像素管道，這里就不多做闡述了
二、常見問題
1、DOM樹是怎么構(gòu)建的
- 瀏覽器從磁盤或網(wǎng)絡(luò)讀取HTML的原始字節(jié)，并根據(jù)文件的指定編碼（例如 UTF-8）將它們轉(zhuǎn)換成字符串
- 將字符串轉(zhuǎn)換成Token，如：<html>、<body>等
- 生成節(jié)點對象并構(gòu)建DOM
2、token是如何拆分的
舉個栗子
<p class="a">abc</p>
- <p“標(biāo)簽開始”的開始
- class=“a” 屬性
“標(biāo)簽開始”的結(jié)束
- abc 文本
- </p> 標(biāo)簽結(jié)束
3、除了script標(biāo)簽，還有什么會阻塞DOM的構(gòu)建
是CSSOM，造成CSSOM影響DOM構(gòu)建的原因還是由于script標(biāo)簽的中途插入，當(dāng)JS想修改樣式時，必須拿到完整的CSSOM，如果瀏覽器尚未完成CSSOM的下載和構(gòu)建，而我們卻想在此時運(yùn)行腳本，那么瀏覽器將延遲JS執(zhí)行和DOM的構(gòu)建，直至完成CSSOM的下載和構(gòu)建
4、渲染樹包括了什么
render tree只包含了用于渲染頁面的節(jié)點
為了形成渲染樹，瀏覽器大致做的事情如下:
- 從DOM樹根節(jié)點開始，遍歷每一個可見的節(jié)點和對應(yīng)的樣式 一些節(jié)點是完全不可見的（比如 script標(biāo)簽，meta標(biāo)簽等），這些節(jié)點會被忽略，因為他們不會影響渲染的輸出
- 一些節(jié)點是通過CSS樣式隱藏了，這些節(jié)點同樣被忽略——例如上例中的span節(jié)點在render tree中被忽略，因為span樣式是display:none;
- 對每一個可見的節(jié)點，找到合適的匹配的CSSOM規(guī)則，并且應(yīng)用樣式 顯示可見節(jié)點（節(jié)點包括內(nèi)容和被計算的樣式）
5、瀏覽器包含哪些進(jìn)程
- 主進(jìn)程（負(fù)責(zé)協(xié)調(diào)，主控），只有一個
- 第三方插件進(jìn)程：每種類型的插件對應(yīng)一個進(jìn)程
- GPU進(jìn)程：最多一個，用于3D繪制等。
- 瀏覽器渲染進(jìn)程
6、渲染進(jìn)程包括了什么
瀏覽器是多進(jìn)程的，瀏覽器的渲染進(jìn)程是多線程的；
- GUI渲染線程，用于布局繪制等
- JS引擎線程
- 事件觸發(fā)線程
- 定時觸發(fā)器線程
- 異步http請求線程
三、關(guān)于圖層
1、概念
上面提到了composite，瀏覽器渲染的圖層大致分為2種：普通圖層、復(fù)合圖層
- 普通文本流屬于1個復(fù)合圖層，無論里面多少元素都在這個復(fù)合圖層里
- absolute和fixed 雖然可以脫離普通文檔流，但是無法脫離默認(rèn)復(fù)合層，所以absolute中信息的改變，仍然會影響整個復(fù)合層的繪制
- 通過硬件加速的方式可以聲明一個新的復(fù)合圖層，不會影響到默認(rèn)復(fù)合圖層
2、復(fù)合圖層的創(chuàng)建條件有什么？（硬件加速）
- 擁有具有3D變換的CSS屬性，如translate3d,translatez
- CSS3動畫的節(jié)點
- video、canvas、iframe、webgl元素
- 擁有CSS加速屬性的元素(will-change)，一般配合opacity與translate使用
- 元素有一個z-index較低且包含一個復(fù)合層的兄弟元素（換句話說就是該元素在復(fù)合層上面渲染）
- 如果有滾動條，滾動條也會單獨生成一個圖層
- flash
3、復(fù)合圖層作用
獨立于普通文本流中，改動可以避免整個頁面的reflow和repaint，提升性能，但是也要注意不要過度使用，否則資源也會消耗過度，適得其反
