前段時間有人我問過我重排(Reflow)與重繪(Repaint)的問題，這裏寫一篇文章描述一下重排與重繪的區別與優化手段，加深理解。
Firefox、Chrome和Safari是基於兩種渲染引擎構建的，Firefox使用Geoko——Mozilla自主研發的渲染引擎，Safari和Chrome都使用webkit。
我們參考webkit的渲染流程：
先科普一下HTML DOM：
HTML DOM，HTML Document Object Model（HTML文檔對象模型）的縮寫，HTML DOM 定義了訪問和操作 HTML 文檔的標準。
W3C對HTML DOM的解釋：
1.HTML 的標準對象模型
2.HTML 的標準編程接口
3.W3C 標準HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。
換言之，HTML DOM 是關於如何獲取、修改、添加或刪除 HTML 元素的標準。
現在來看渲染流程圖
解釋：
HTML->HTML Parser -> DOM Tree: 解析html，創建DOM Tree，即瀏覽器將HTML解析成樹形的數據結構。
Style->CSS Parser->Style Rules: 解析css，創建樣式規則，其實也是將css解析成樹形的數據結構。
Attachment->Render Tree->layout: 連接DOM節點與CSS Rules以構生成Render Tree，在render樹的基礎上進行佈局, 計算每個節點的幾何結構，這裏發生的就是重排（Reflow）。
painting->Display: 繪製，按照算出來的規則繪製樣式，顯示內容。
Reflow：當涉及到DOM節點的佈局屬性發生變化時，就會重新計算該屬性，瀏覽器會重新描繪相應的元素，此過程叫 迴流（Reflow）。
Repaint：當影響DOM元素可見性的屬性發生變化 (如 color) 時, 瀏覽器會重新描繪相應的元素, 此過程稱爲 重繪（Repaint)。因此重排會引起重繪。
瀏覽器在處理重排時，會遞歸處理DOM節點，所以導致重排的成本高於重繪，我們只需避免重排即可，引起重排的操作：
1.調整窗口大小
2.字體大小
3.樣式表變動
4.元素內容變化，尤其是輸入控件
5.CSS僞類激活（:hover、:active等等），在用戶交互過程中發生
6.DOM操作，DOM元素增刪、修改
7.width, clientWidth, scrollTop等佈局寬高的計算
這麼看，我們只要避免兩種操作即可達到性能優化：
1.避免大量的DOM操作
2.避免過多DOM佈局屬性的計算
細分：
1.不要直接讀取style屬性逐條修改保存。應該集中修改樣式，譬如直接修改className。
2.創建div，設置display:none，然後將它所有的DOM操作全部應用上，最後再添加到html文檔裏，修改display，顯示出來。
3.避免頻繁讀取元素幾何屬性（例如scrollTop）。
4.絕對定位具有複雜動畫的元素。絕對定位使它脫離文檔流，避免引起父元素及後續元素大量的迴流。
後面瞭解到更多時，再補充。