瀏覽器渲染機制、重繪、重排
阿新 • • 發佈：2021-09-13
1、渲染
1.解析：html和css被解析 2.構建DOM：html被html解析器解析成DOM樹 3.構建CSSDOM樹：css被css解析器解析成CSS規則樹 4.js指令碼執行 5.渲染樹構建：將HTML和CSS合成render樹 6.佈局（重繪重排）：生成佈局(flow),即將所有渲染樹的所有節點進行平面合成 7.繪製：將佈局繪製到螢幕上2、重繪
當一個元素的外觀發生改變，但沒有改變佈局,重新把元素外觀繪製出來的過程，叫做重繪。觸發：
改變元素的color、background、box-shadow等屬性
3、重排
當DOM的變化影響了元素的幾何資訊(DOM物件的位置和尺寸大小)，瀏覽器需要重新計算元素的幾何屬性，將其安放在介面中的正確位置，這個過程叫做重排。
觸發：
新增或者刪除可見的DOM元素
元素尺寸改變邊距、填充、邊框、寬度和高度
-
重繪不一定需要重排（比如顏色的改變），重排必然導致重繪（比如改變網頁位置）