簡述reflow和repaint

今天在看面試題的時候遇到reflow和repaint的問題，之前並無接觸過，因此拿來學習一下~

reflow 和 repaint 會拖慢瀏覽器的速度，並且用戶和Web頁面都不能在 reflow 和 repaint 執行時作任何操做和響應

reflow和repaint定義及觸發場景

repaint

repaint是重繪，在改變 DOM 元素的視覺效果時觸發，即不涉及任何排版佈局的問題時觸發。

觸發場景：

• opacity
• text-align/text-decoration
• color/background-color
  
• :hover

repaint發生後瀏覽器會去 check 這個DOM元素內的全部節點，因此repaint會影響某個DOM進行重繪。

reflow

reflow是迴流，在某一個 DOM 元素的位置發生改變後觸發，並且它會從新計算全部元素的位置和在頁面中的佔有的面積，因此reflow的影響比repaint更大，由於它將會影響它全部的children、ancestors及siblings。因此影響是針對整個頁面的，整個頁面都須要從新渲染。

觸發場景:

• 使用JS改變DOM元素時會觸發reflow，即添加(appendChild)、刪除(removeChild)DOM元素或者改變DOM元素的可見性(display:none)

• CSS中width/height/border/margin/padding的改變

• CSS3 動畫(animation)和過渡(transition)，動畫的每一frame都會觸發reflow

• 讀取元素的某些屬性(offsetLeft/Top、offsetHeight/Width、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))時會觸發reflow，由於這些屬性須要依賴一些元素去計算
  

• :hover 引發的元素表現變化

• 瀏覽器大小的改變   (resize)

• 字體大小改變或更換字體   (font)

• 更換class樣式表

如何儘量的避免觸發reflow和repaint，提升性能？

1. 儘量的減小DOM元素相互影響

2. 避免設置內聯樣式

3. 儘可能簡寫CSS樣式

4. 刪除複雜動畫，儘可能給動畫元素設置position:fixed/absolute，使動畫元素從DOM流中獨立出來，從而減小對其餘元素的影響。同時，儘可能犧牲平滑度去知足性能，由於動畫精度太強，會形成更屢次的repaint/reflow

5. 避免使用table進行佈局：table的每一個元素的大小以及內容的改動，都會致使整個table進行從新計算，形成大幅度的repaint或者reflow。改用div則能夠進行鍼對性的repaint和避免沒必要要的reflow

6. 避免在CSS中使用運算式：學習CSS的時候就知道，這個應該避免，不該該加深到這一層再去了解，由於這個的後果確實很是嚴重，一旦存在動畫性的repaint/reflow，那麼每一幀動畫都會進行計算，性能消耗不容小覷。

7. 減小DOM的層級，減小DOM的數量，DOM數量越少越好
8. 慎改class！！去改子元素少的DOM的class
9. 儘可能採起批量更新元素樣式的方式，好比能夠將須要修改的樣式集合放在一個class裏，將這個class附給元素

關於性能問題還有不少須要說的，以前在準備面試的時候看到Yahoo總結的一些性能提高的方法，要慢慢積累起來！

最近回學校寫畢業論文的空檔又複習總結了一些好比閉包啊this指向啊做用域啊之類的js的題，明天繼續發博~你們晚安~