一、渲染過程
1.解析HTML文檔,構建DOM tree;
2.解析CSS文件,構建CSSOM tree;
3.合并DOM tree和CSSOM tree,生成render tree;
4.開始布局,計算每個節點的位置信息;
5.將render tree每個節點繪制顯示出來。
二、具體流程
1、解析HTML生成DOM tree
在瀏覽器接收到服務器響應來的HTML文檔之后,會遍歷文檔節點,生成DOM tree。但是DOM tree的生成過程中可能會被CSS和JS的加載執行阻塞。
2、解析CSS生成CSSOM tree
瀏覽器解析CSS文件生成CSSOM tree,每個CSS文件都被分析成StyleSheet對象,每個對象都包含CSS規則,CSS規則包括選擇器、一條或多條聲明。
3、將DOM tree和CSSOM tree合并在一起生成render tree
通過DOM tree和CSSOM tree可以合成render tree。瀏覽器會先從DOM tree的根節點開始遍歷每一個可見節點,然后找到與每一個可見節點適配的樣式并進行應用。
對于不可見的元素,它們是不會出現在render tree上的,但是visibility為hidden的元素會出現這顆樹上。
4、遍歷render tree開始布局,計算每個節點的位置大小信息
布局階段會從render tree的根節點開始遍歷,然后確定每個節點在頁面上的位置和大小,最后輸出一個盒子模型,它會精確的捕獲每個節點在屏幕上的確切位置和大小。
5、將render tree每個節點繪制顯示出來
繪制階段會遍歷render tree,調用渲染器的paint()方法在屏幕顯示內容。
render tree的繪制工作是由瀏覽器的UI后端組件完成的。
渲染阻塞:
瀏覽器解析文檔,當遇到<script>標簽時,會立即執行腳本,暫停文檔的解析。因為JS可能會改動DOM和CSS,直到腳本執行完成,然后才會繼續解析文檔。
如果是外部腳本,則會先下載完腳本,然后再繼續解析文檔。
兩個原則:CSS優先、JS置后。
三、reflow(回流)和repaint(重繪):
HTML默認是流式布局,CSS和JS會打破這種布局,改變DOM的外觀樣式以及大小和位置。
repaint:一般在改變DOM元素視覺效果時觸發,不影響整體布局,是對某個DOM元素進行重繪,比如元素的背景色變了,不影響元素的大小和位置。
repaint的常見場景:
- 字體顏色的修改;
- 背景顏色的修改;
- text-align的修改等;
reflow:某個DOM元素的位置或尺寸變了,需要重新計算所有DOM元素的位置和大小。所以repaint比reflow的影響要大得多,整個頁面需要重排,也就是對每個DOM元素進行重新渲染。
reflow的常見場景:
- width height padding margin border的修改;
- 窗口大小的改變;
- 文字大小的改變;
- 操作class屬性;
- 添加、刪除DOM元素或改變DOM元素的dispaly屬性等;
四、性能優化
應當盡量少的reflow和repaint
- 盡量減少DOM元素的相互影響,直接修飾你想修飾的元素,避免通過父元素作用域子元素
- 避免設置內聯樣式
- 設置動畫元素的position為fixed或absolute
- 權衡速度的平滑,動畫精度太強,會造成更多的reflow或repaint
- 避免使用table布局,table的每個元素的大小以及內容的改動,都會導致整個table進行重新計算
- 避免在CSS中使用運算表達式
有些情況下,修改了元素樣式之后,瀏覽器并不會立即reflow或repaint,而是將這樣的操作積攢一批,然后做一次reflow,這就叫做異步reflow或者增量異步reflow.
四、結語
如果本文存在錯誤的地方,歡迎指出批評~~~