瀏覽器的渲染過程

一、渲染過程

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.

四、結語

如果本文存在錯誤的地方,歡迎指出批評~~~

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容