前端性能優化——迴流與重繪

前言

最近在研究virtual dom，接着就研究回顧起迴流（reflow）與重繪（repaint）了。

迴流與重繪，好像你們都很熟悉的樣子，可是要具體來講說，又說不出什麼來。下面我是我稍作的整理：

瀏覽器渲染流程

在理解這兩個概念以前，咱們先來看看瀏覽器渲染的工做流程。這裏以webkit渲染引擎爲例

1. 瀏覽器請求到html文檔後，將html解析成dom Tree
2. css被解析成css style rules
3. 解析完成後，將結合dom Tree和style rules構造render tree
4. 瀏覽器計算render tree中每一個渲染對象的位置和大小，即佈局（layout）
5. 最後進行繪製（painting）

迴流與重繪

迴流（reflow）

當元素的規模尺寸、佈局、隱藏等改變，而致使render tree的一部分(或所有)從新構建，即稱爲迴流。每一個頁面至少進過一次迴流，就在頁面第一次加載的時候。在迴流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並從新構造這部分渲染樹，完成迴流後，瀏覽器會從新繪製受影響的部分到屏幕中，該過程成爲重繪。

重繪（repaint）

當render tree中的一些元素須要更新屬性，這些屬性隻影響元素的外觀，風格，而不會影響元素尺寸、佈局、隱藏的，好比background-color，就叫重繪。

注意：迴流必將引發重繪，而重繪不必定會引發迴流。

迴流的發生

1. 可見元素尺寸的改變，如width、height、margin、padding等屬性改變引發尺寸的變化
2. window resize事件的觸發
3. 元素display屬性的改變
4. 元素位置的改變
5. 等等

性能優化

迴流與重繪很是影響web性能，由於每一次html和css的從新解析而後再構建成render tree，都須要通過大量的計算，這個過程是很耗時間耗性能的。如何減小呢？建議

1. 頁面元素適當定高，如img的夾在在文檔流中佔據的空間從0到徹底加載，會產生頻繁的重繪
2. 減小dom的深度，能夠減小解析器耗時
3. 儘可能簡化css
4. 複雜的動畫，可使其元素脫離文檔流，使用position:absolute或者position:fixed，以減小對父元素的影響

固然，這裏列舉的並非所有的方法，若你有更好的建議，也但願一塊兒分享出來

參考文檔

https://kb.cnblogs.com/page/1...
https://www.html5rocks.com/zh...