瀏覽器渲染的過程

時間 2019-12-06

標籤瀏覽器渲染過程欄目瀏覽器简体版

原文原文鏈接

在討論頁面渲染性能的時候，常常會聽到這幾個詞「重繪」「迴流」「重排」。
迴流和重排都是 Reflow的不一樣翻譯(叫法)
重繪對應Repaint，從新繪製的意思。css

webkit瀏覽器的渲染過程
html

Gecko(firefox)瀏覽器的渲染過程
web

從圖上能夠看出來咱們熟知的Reflow的說法源於ff,webkit這個過程稱之爲layout(計算佈局),意思大概差很少吧。算法

瀏覽器的工做大體流程
shell

從這個過程當中能夠了解到瀏覽器渲染主要有這麼幾步瀏覽器

幾個值得關注的點：spa

render tree不徹底包含dom tree的內容，head或者display:none的元素不會出如今render tree中
reflow/layout
reflow/layout一定會repaint但repaint不必定會reflow/layout
css rule tree的生成過程
Repaint——屏幕的一部分要重畫，好比某個CSS的背景色變了。可是元素的幾何尺寸沒有變。
Reflow——意味着元件的幾何尺寸變了，咱們須要從新驗證並計算Render Tree。是Render Tree的一部分或所有發生了變化。這就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式佈局，因此，若是某元件的幾何尺寸發生了變化，須要從新佈局，也就叫reflow）reflow 會從<html>這個root frame開始遞歸往下，依次計算全部的結點幾何尺寸和位置，在reflow過程當中，可能會增長一些frame，好比一個文本字符串必需被包裝起來。