一、 什么是重繪和回流

在 html 中，每個元素都可以理解成一個盒子，在瀏覽器解析過程中，會涉及到回流和重繪：

• ? 回流：布局引擎會根據各種樣式計算每個盒子在頁面上的大小與位置
• ? 重繪：當計算好盒子模型的位置、大小及其其他屬性后，瀏覽器根據每個盒子特性進行繪制

具體的瀏覽器解析渲染機制如下所示：

具體的瀏覽器解析渲染機制如下所示：

• 解析HTML，生成DOM樹，解析CSS，生成CSSOM樹

• 將DOM樹和CSSOM樹結合，生成渲染樹(Render Tree)

• Layout(回流):根據生成的渲染樹，進行回流(Layout)，得到節點的幾何信息（位置，大小）

• Painting(重繪):根據渲染樹以及回流得到的幾何信息，得到節點的絕對像素

• Display:將像素發送給GPU，展示在頁面上?

在頁面初始渲染階段，回流不可避免的觸發，可以理解成頁面一開始是空白的元素，后面添加了新的元素使頁面布局發生改變

當我們對?DOM?的修改引發了?DOM幾何尺寸的變化（比如修改元素的寬、高或隱藏元素等）時，瀏覽器需要重新計算元素的幾何屬性，然后再將計算的結果繪制出來

當我們對?DOM的修改導致了樣式的變化（color或background-color），卻并未影響其幾何屬性時，瀏覽器不需重新計算元素的幾何屬性、直接為該元素繪制新的樣式，這里就僅僅觸發了回流

二、??什么會引起回流

頁面渲染初始化

DOM結構變化，比如刪除了某個節點；

render樹變化，比如減少了padding

窗口resize事件觸發

最復雜的一種：獲取某些屬性，引發回流?很多瀏覽器會對回流做優化，他會等到足夠數量的變化發生，在做一次批處理回流。?但是除了render樹的直接變化。?當獲取一些屬性時，瀏覽器為了獲得正確的值也會觸發回流。這樣就使得瀏覽器的優化失效了

這些屬性包括

offsetTop, offsetLeft, offsetWidth, offsetHeight

scrollTop/Left/Width/Height

clientTop/Left/Width/Height

width,height

調用了getComputedStyle(), 或者 IE的 currentStyle

var s = document.body.style;s.padding = "2px"; // 回流+重繪s.border = "1px solid red"; // 再一次 回流+重繪s.color = "blue"; // 再一次重繪s.backgroundColor = "#ccc"; // 再一次 重繪s.fontSize = "14px"; // 再一次 回流+重繪// 添加node，再一次 回流+重繪document.body.appendChild(document.createTextNode('abc!'));

可以看出，回流一定伴隨著重繪，而重繪卻可以單獨出現

可以理解為，路人甲摔斷了腿或者抽脂之后，病怏怏導致頭發也變白了(回流+重繪)；但是炮灰乙卻僅僅是去村口王師傅那里燙了頭(重繪)

回流對性能產生了一定的影響，盡管瀏覽器機智地幫我們進行了批處理，但是仍然存在著上述諸多闊怕的屬性，一獲取就回流。怎么解決？

三、 減少回流

避免逐項更改樣式。最好一次性更改style屬性，或者將樣式列表定義為class并一次性更改class屬性。

避免循環操作DOM。創建一個documentFragment或div，在它上面應用所有DOM操作，最后再把它添加到window.document。

避免多次讀取offsetLeft等屬性。無法避免則將它們緩存到變量。

將復雜的元素絕對定位或固定定位，使它脫離文檔流。否則回流代價十分高

補充：改變字體大小會引發回流

總結

以上是生活随笔為你收集整理的回流跟重绘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。