目錄

• 瀏覽器的渲染機制
• 迴流 與 重繪
• 迴流
• 導致迴流的操作:
• 重繪
• 導致重繪的操作:

瀏覽器的渲染機制

1.瀏覽器採用兩個引擎來處理頁面的工作,不同的瀏覽器使用的渲染引擎不一樣

渲染引擎:

Chrom和Safari使用"WebKit",

Firefor使用"Geoko"

引擎

2.瀏覽器CbwXaH會把html解析成 DOM樹,把解析成 CSSOM(CSS物件模型);

3.接著會把 DOM樹 和 CSSOM,結合產生 render tree(渲染樹);

4.渲染樹完成後,瀏覽器會根據渲染樹佈局,佈局結束後會輸出一個"盒模型",它會精確捕獲每個節點在檢視中的位置、尺寸,並且所有測量值都會轉換為螢幕上的物理畫素值;    (這一步會產生 迴流(reflow)

5.佈局完成後,瀏覽器會立即發出 paint stup 事件,將渲染樹轉換為螢幕畫素;    (這一步會產生 重繪(repaint) )

6.經過以上步驟,頁面將顯示在螢幕上.

注意 迴流必將引起重繪,而重繪不一定引起迴流

迴流 與 重繪

迴流

概念:

當渲染樹(render tree)中的部分或全部,因為元素的結構、尺寸、佈局等改變時,瀏覽器重新渲染部分DOM或全部DOM的過程.

強調元素節點的位置、距離發生改變.

導致迴流的操作:

• 瀏覽器視窗大小發生變化
• 內容改變
• 新增或刪除節點
• 啟用CSS偽類
• 等等…

重繪

概念:

當頁面元素樣式改變,而不影響它在文件流中的位置www.cppcns.com,瀏覽器只會將新的樣式賦予元素,並進行重新繪製操作.

強調元素節點的樣式,例如顏色,邊框實線變虛線(不改變位置、距離).

導致重繪的操作:

• backgrouhttp://www.cppcns.comnd-color屬性值變化時
• border-color屬性值變化時
• visibility屬性值變化時
• 等等…

以上就是Web面試常問迴流reflow與重繪repaint原理及區別的詳細內容，更多關於Web面試迴流reflow與重繪repaint的資料請關注我們其它相關文章！