1、重繪(Repaint)
重繪是一個元素外觀的改變所觸發的瀏覽器行為，例如改變outline、背景色等屬性。瀏覽器會根據元素的新屬性重新繪制，
使元素呈現新的外觀。重繪不會帶來重新布局，所以並不一定伴隨重排。
2、重排(Reflow)
渲染對象在創建完成並添加到渲染樹時，並不包含位置和大小信息。計算這些值的過程稱為布局或重排
"重繪"不一定需要"重排"，比如改變某個網頁元素的顏色，就只會觸發"重繪"，不會觸發"重排"，因為布局沒有改變。
但是，"重排"必然導致"重繪"，比如改變一個網頁元素的位置，就會同時觸發"重排"和"重繪"，因為布局改變了。
3、常見的觸發重排的操作
Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每個結點都會有 reflow 方法，
一個結點的 reflow 很有可能導致子結點，甚至父點以及同級結點的 reflow。在一些高性能的電腦上也許還沒什么，
但是如果 reflow 發生在手機上，那么這個過程是非常痛苦和耗電的。
所以，下面這些動作有很大可能會是成本比較高的。
當你增加、刪除、修改 DOM 結點時，會導致 Reflow , Repaint。
當你移動 DOM 的位置
當你修改 CSS 樣式的時候。
當你 Resize 窗口的時候（移動端沒有這個問題）
當你修改網頁的默認字體時。
獲取某些屬性時
注：display:none 會觸發 reflow，而 visibility:hidden 只會觸發 repaint，
因為沒有發現位置變化。
4、注意
當你請求向瀏覽器請求一些 style信息的時候，就會讓瀏覽器flush隊列，比如：
（1）offsetTop, offsetLeft, offsetWidth, offsetHeight
（2）scrollTop/Left/Width/Height
（3）clientTop/Left/Width/Height
（4）width,height
當你請求上面的一些屬性的時候，瀏覽器為了給你最精確的值，需要flush隊列，
因為隊列中可能會有影響到這些值的操作。即使你獲取元素的布局和樣式信息跟最近的布局信息差不多，
瀏覽器都會強行刷新渲染隊列。
5、優化
（1）將多次改變樣式屬性的操作合並成一次操作
（2）將需要多次重排的元素，position屬性設為absolute或fixed，
這樣此元素就脫離了文檔流，它的變化不會影響到其他元素。例如有動畫效果的元素就最好設置為絕對定位。
（3）由於display屬性為none的元素不在渲染樹中，對隱藏的元素操作不會引發其他元素的重排。
如果要對一個元素進行復雜的操作時，可以先隱藏它，操作完成后再顯示。這樣只在隱藏和顯示時觸發2次重排。