頁面渲染性能控制-重繪與回流

Noodles 發布于2019-08-30 11:13 / 787人閱讀

摘要：重繪只涉及樣式的改變，不涉及到布局。當獲取一些屬性時，瀏覽器為了獲得正確的值也會觸發回流。避免多次讀取等屬性。將復雜的元素絕對定位或固定定位，使它脫離文檔流。

瀏覽器解析代碼過程

頁面的顯示過程分為以下幾個階段：

生成DOM樹(包括display:none的節點)

在DOM樹的基礎上根據節點的集合屬性(margin,padding,width,height等)生成render樹(不包括display:none，head節點，但是包括visibility:hidden的節點)

在render樹的基礎上繼續渲染顏色背景色等樣式

reflow:當render樹的一部分或者全部因為大小邊距等問題發生改變而需要重建的過程，叫做回流
repaint:當諸如顏色背景等不會引起頁面布局變化，而只需要重新渲染的過程叫做重繪

通過上述定義，可以很明顯看出，重繪的代價要比回流小。重繪只涉及樣式的改變，不涉及到布局。重繪就好像給人染了一個頭發，而回流相當于給人做了一次整形手術

什么會引起回流

頁面渲染初始化

DOM結構變化，臉上整得親媽都認不出來了，所以會引發回流

render樹變化，比如減少了padding，增加border等等，改變頁面布局了

窗口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"; // 再一次 回流+重繪, 沒想到吧，改變字體大小也會回流

document.body.appendChild(document.createTextNode("abc!"));  // 添加node，再一次 回流+重繪

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

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

減少回流

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

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

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

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

display:none和visibility：hidden會產生回流與重繪

display：none指的是元素完全不陳列出來，不占據空間，涉及到了DOM結構，故產生reflow與repaint
visibility：hidden指的是元素不可見但存在，保留空間，不影響結構，故只產生repaint

高性能計算頁面渲染測速頁面控制頁面性能頁面性能優化

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

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

頁面渲染性能控制-重繪與回流

摘要：重繪只涉及樣式的改變，不涉及到布局。當獲取一些屬性時，瀏覽器為了獲得正確的值也會觸發回流。避免多次讀取等屬性。將復雜的元素絕對定位或固定定位，使它脫離文檔流。瀏覽器解析代碼過程頁面的顯示過程分為以下幾個階段：生成DOM樹(包括display:none的節點) 在DOM樹的基礎上根據節點的集合屬性(margin,padding,width,height等)生成render樹(不包...

cooxer 2019-08-23 18:12 評論0 收藏0
你應該要知道的重繪與重排

摘要：合并樣式操作比如可以合并成批量修改使元素脫離文檔流，再對其進行操作，然后再把元素帶回文檔中，這種辦法可以有效減少重繪重排的次數。前言現代web框架大多都是數據驅動類的，比如 react, vue，所以開發者不需要直接接觸 DOM，修改 data 便可以驅動界面更新。但是作為前端工程師，了解瀏覽器的重繪與重排還是很有必要的，可以幫助我們寫出更好性能的 web 應用。瀏覽器的渲染 ...

liukai90 2019-08-23 14:41 評論0 收藏0
瀏覽器渲染機制與相應優化策略

摘要：瀏覽器渲染樹我們假設響應后和文件已經齊備了，此時瀏覽器會怎么做呢當前響應瀏覽器的普適渲染方式首先，瀏覽器會根據文件生成樹，載入文件構建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 瀏覽器渲染樹我們假設HTTP響應后HTML和CSS、JavaScript文件已經齊備了，此時瀏覽器會怎么做呢？當前HTTP響應瀏覽器...

suxier 2019-08-29 12:15 評論0 收藏0
瀏覽器渲染機制與相應優化策略

摘要：瀏覽器渲染樹我們假設響應后和文件已經齊備了，此時瀏覽器會怎么做呢當前響應瀏覽器的普適渲染方式首先，瀏覽器會根據文件生成樹，載入文件構建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 瀏覽器渲染樹我們假設HTTP響應后HTML和CSS、JavaScript文件已經齊備了，此時瀏覽器會怎么做呢？當前HTTP響應瀏覽器...

sushi 2019-08-21 15:27 評論0 收藏0