瀏覽器的渲染機(jī)制

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

渲染引擎:

Chrom和Safari使用"WebKit",

Firefor使用"Geoko"

js引擎

2.瀏覽器會把html解析成 DOM樹, 把css解析成 CSSOM(CSS對象模型);

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

4.渲染樹完成后, 瀏覽器會根據(jù)渲染樹布局, 布局結(jié)束后會輸出一個"盒模型", 它會精確捕獲每個節(jié)點在視圖中的位置、尺寸, 并且所有測量值都會轉(zhuǎn)換為屏幕上的物理像素值;    (這一步會產(chǎn)生 回流(reflow) )

5.布局完成后, 瀏覽器會立即發(fā)出 paint stup 事件, 將渲染樹轉(zhuǎn)換為屏幕像素;    (這一步會產(chǎn)生 重繪(repaint) )

6.經(jīng)過以上步驟, 頁面將顯示在屏幕上.

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

回流 與 重繪

回流

概念:

當(dāng)渲染樹(render tree)中的部分或全部, 因為元素的結(jié)構(gòu)、尺寸、布局等改變時, 瀏覽器重新渲染部分DOM或全部DOM的過程.

強調(diào)元素節(jié)點的位置、距離發(fā)生改變.

導(dǎo)致回流的操作:

• 瀏覽器窗口大小發(fā)生變化
• 內(nèi)容改變
• 添加或刪除節(jié)點
• 激活CSS偽類
• 等等…

重繪

概念:

當(dāng)頁面元素樣式改變, 而不影響它在文檔流中的位置, 瀏覽器只會將新的樣式賦予元素, 并進(jìn)行重新繪制操作.

強調(diào)元素節(jié)點的樣式, 例如顏色, 邊框?qū)嵕€變虛線(不改變位置、距離).

導(dǎo)致重繪的操作:

• background-color屬性值變化時
• border-color屬性值變化時
• visibility屬性值變化時
• 等等…

以上就是Web面試常問回流reflow與重繪repaint原理及區(qū)別的詳細(xì)內(nèi)容，更多關(guān)于Web面試回流reflow與重繪repaint的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論