性能優化之reflow和repaint

本文主要介紹一下什麼是reflow,repaint, 怎樣避免它們形成的不良影響, 怎麼經過工具查看分析它們.　　

一.首先對瀏覽器渲染引擎下網頁呈現過程簡要說一下:

1. 瀏覽器的渲染引擎開始解析html構建成DOM樹，DOM樹是以document對象爲根節點，包含全部的html標籤， 包括display： none隱藏的，也包括js動態添加的元素。
2. 解析html的同時， 將css文件或者樣式元素中的樣式解析成CSS Rule Tree，解析時會去掉瀏覽器不能識別的樣式。
3. 根據DOM樹和CSSOM來構造Rendering Trre。Rendering Trre和DOM Tree相比較，Rendering Trre中每一個節點都包含樣式信息，並且Render Tree不會包含隱藏的節點，只有影響到呈現的節點纔會包含在Render Tree中（例如： display：none的節點，head節點不會包含在Render Tree中，visibility：hidden會被包含，由於它會影響layout）。
4. 生成佈局（layout），計算各節點元素在屏幕上所在位置和幾何結構。
5. 繪製（paint），將佈局繪製到屏幕上。

　　以上5步中，主要耗時的是後2步，後兩步合稱爲渲染（render）。

二: 什麼是reflow 和 repaint：

　　網頁在生成的過程當中，至少要渲染一次。以後在訪問過程當中，還會不斷的進行渲染。從新渲染就行從新生成佈局和繪製（也就是重複進行上面的第4，5步）從新生成佈局的過程就是reflow（迴流，重排），從新繪製就叫作reflow（重繪）。

三: 何時觸發reflow和repaint

注： repaint不必定須要reflow，例如：改變某元素的顏色，只會觸發repaint，不會觸發reflow。可是reflow必定會致使repaint，由於佈局改變了，就必定須要從新繪製。
Reflow 的成本比 Repaint 的成本高不少。DOM Tree裏的每一個節點都會有reflow方法，一個結點的reflow可能致使其子結點，甚至父點以及同級結點的 reflow。在PC端或許還沒什麼，可是在手機上，仍是比較耗性能和耗電的。
如下狀況會致使reflow：

1. 增長貨移除css樣式
2. 改變字體大小
3. 改變窗口大小
4. 操做class屬性
5. 激活css僞類
6. 內容變化，如在input內輸入文字
7. js操做DOM
8. 獲取offsetTop, offsetLeft等layout屬性
9. 設置css屬性等值

　　　... ...

四.如何減少reflow的影響:

1. 減小沒必要要的DOM層級.
2. 避免使用table進行佈局,由於可能很小的一個小改動會形成整個 table 的從新佈局。
3. 儘可能經過position屬性爲absolute或fixed實現動畫效果
4. 不要一條一條地修改 DOM 的樣式。而是預先定義好對應的 class，而後修改對應節點的 className
5. 不要逐條操做DOM節點：    a> 使用 documentFragment 對象在內存裏操做 DOM。　　b> 先把 DOM 給 display:none (有一次 repaint)，作完全部的修改後,再把他顯示出來。　　c> clone 一個 DOM 節點到內存裏，作完全部的修改後，再交換一下。
6. 請求以下值offsetTop, offsetLeft, offsetWidth, offsetHeight，scrollTop/Left/Width/Height，clientTop/Left/Width/Height，瀏覽器會發生reflow，建議將他們合併到一塊兒操做，能夠減小回流的次數。屢次要用到值,能夠先用變量緩存起來.

　　... ...

五.開發者工具查看

　　Chrome瀏覽器開發者工具的Performance面板,能夠查看頁面迴流和重繪所花費的時間.
　　打開f12下的開發者工具, 切換到Performance面板.以下圖:

　　

　　點擊開始錄製按鈕,會開始錄製,這時在網頁上進行一些操做, 而後點擊中止按鈕,以下:

　　

　　從圖中能夠判斷出性能問題到底出如今哪一個環節,是js的執行,仍是渲染

　　圖中不一樣顏色表明不一樣的事件, 哪一個色塊越大, 說明耗時越長,問題越大.能夠根據此去進行優化.

• 黃色: javaScript執行時間
• 紫色: 樣式從新計算和佈局, 即reflow時間
• 綠色: repaint時間　

 如何對線上項目進行性能監控