【前端工程師手冊】學習回流和重繪（reflow和repaint）

liuyix 發布于2019-08-29 16:12 / 1406人閱讀

摘要：重繪元素做了一些不影響排版的改變，比如背景色下劃線等等，只需要重新繪制的過程，叫做重繪。顯然回流帶來的代價大于重繪，因為重繪僅僅是重新畫一遍元素而已，但是重繪是重新計算重新畫。不然這會導致大量地讀寫這個結點的屬性。

瀏覽器的大概工作流程

以普通的HTML頁面為例：

解析HTML文檔，生成dom樹

解析css產生css規則樹

解析JavaScript，通過DOM-API來操作dom樹和css規則樹

通過dom樹和css規則樹來構造渲染樹（rendering tree）

調用操作系統的GUI接口畫頁面

回流（reflow）和重繪（repaint）

回流：

元素的大小尺寸、位置發生變化時，會重新計算渲染樹，頁面要進行重新排版工作，這個過程即是回流。

重繪：

元素做了一些不影響排版的改變，比如背景色、下劃線等等，只需要重新繪制的過程，叫做重繪。

顯然回流帶來的代價大于重繪，因為重繪僅僅是重新畫一遍元素而已，但是重繪是重新計算+重新畫。

回流的原因：

Initial。網頁初始化的時候。

Incremental。一些Javascript在操作DOM Tree時。

Resize。其些元件的尺寸變了

StyleChange。如果CSS的屬性發生變化了。

Dirty。幾個Incremental的reflow發生在同一個元素的子樹上。

更具體的說，就是這些常見的操作會引起回流：

調整窗口大小

字體大小

樣式表變動

元素內容變化，尤其是輸入控件

CSS偽類激活，在用戶交互過程中發生

DOM操作，DOM元素增刪、修改

width, clientWidth, scrollTop等布局寬高的計算

ps：但是瀏覽器并不會在我們一進行上面的操作就進行回流，瀏覽器會積攢一批reflow然后一起進行回流，不過有的操作會讓瀏覽器立馬進行回流，比如resize窗口，改變了頁面默認的字體，或者說獲取以下這些值：

offsetTop, offsetLeft, offsetWidth, offsetHeight

scrollTop/Left/Width/Height

clientTop/Left/Width/Height

IE中的 getComputedStyle(), 或 currentStyle

如何減少reflow和repaint

避免頻繁的修改樣式，可以將要修改的多個樣式定義為一個class類，然后將類名一次賦值即可

把dom離線操作:

使用documentFragment 對象在內存里操作DOM

先把DOM給display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他顯示出來。

clone一個DOM結點到內存里，然后想怎么改就怎么改，改完后，和在線的那個的交換一下

不要把DOM結點的屬性值放在一個循環里當成循環里的變量。不然這會導致大量地讀寫這個結點的屬性。

為動畫的HTML元件使用fixed或absoult的position，那么修改他們的CSS是不會reflow的，因為脫離了文檔流

參考

減少重排與重繪

瀏覽器的渲染原理簡介

GPU云服務器云服務器前端工程師學習快照和重裝系統前端工程師和后端前端和web工程師

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113598.html

【前端工程師手冊】學習回流和重繪（reflow和repaint）

摘要：重繪元素做了一些不影響排版的改變，比如背景色下劃線等等，只需要重新繪制的過程，叫做重繪。顯然回流帶來的代價大于重繪，因為重繪僅僅是重新畫一遍元素而已，但是重繪是重新計算重新畫。不然這會導致大量地讀寫這個結點的屬性。瀏覽器的大概工作流程以普通的HTML頁面為例：解析HTML文檔，生成dom樹解析css產生css規則樹解析JavaScript，通過DOM-API來操作dom樹和...

fish 2019-08-23 10:36 評論0 收藏0
性能：深入理解瀏覽器渲染原理 reflow & repaint

摘要：之后，如果渲染樹發生了變動，那么可能會觸發回流或重繪中的一個或二者。在書寫時要避免不必要的層級，書寫時避免嵌套過深規則過于復雜，尤其是后代選擇器，匹配選擇器也會耗費更多的。剛入行前端的時候是不是經常看到有文章說盡量不要用CSS通配符*，CSS選擇器層疊最好不要超過三層，HTML少使用table，結構也要盡量簡單一些...這一切說的不無道理，過多的使用確實會造成瀏覽器渲染的性能降低，當...

WelliJhon 2019-08-29 13:30 評論0 收藏0
DOM操作成本到底高在哪兒？

摘要：刨根問底，這里說的成本，到底高在哪兒呢什么是文檔對象模型什么是可能很多人第一反應就是等標簽至少我是，但要知道，是，是，對象模型，是為提供的。操作具體的成本，說到底是造成瀏覽器回流和重繪，從而消耗資源。從我接觸前端到現在，一直聽到的一句話：操作DOM的成本很高，不要輕易去操作DOM。尤其是React、vue等MV*框架的出現，數據驅動視圖的模式越發深入人心，jQuery時代提供的強大便...

yuxue 2019-08-22 15:51 評論0 收藏0
DOM操作成本到底高在哪兒？

摘要：刨根問底，這里說的成本，到底高在哪兒呢什么是文檔對象模型什么是可能很多人第一反應就是等標簽至少我是，但要知道，是，是，對象模型，是為提供的。操作具體的成本，說到底是造成瀏覽器回流和重繪，從而消耗資源。從我接觸前端到現在，一直聽到的一句話：操作DOM的成本很高，不要輕易去操作DOM。尤其是React、vue等MV*框架的出現，數據驅動視圖的模式越發深入人心，jQuery時代提供的強大便...

MASAILA 2019-08-02 10:04 評論0 收藏0
回流、重繪及其優化

摘要：回流重繪及其優化渲染過程渲染引擎通過通過網絡請求接收渲染內容解析抽象抽象出布局繪畫抽象渲染引擎的第一步是解析文檔并將解析的元素轉換為樹中的實際節點。回流、重繪及其優化渲染過程渲染引擎通過通過網絡請求接收渲染內容解析HTML抽象DOM tree 抽象出Render tree 布局（layout）render tree 繪畫render tree 抽象DOM tree 渲染引擎...

Clect 2019-08-22 16:30 評論0 收藏0