探討css中repaint和reflow

(我的blog遷移文章。)

前言：

頁面設計中，不可避免的須要瀏覽器進行repaint和reflow。那到底什麼是repaint和reflow呢。下面談談本身對repaint和reflow的理解，以及結合其餘技術牛的講解，談談如何優化repaint和reflow。

初步介紹：

開發一個頁面時，不可避免的須要進行repaint和reflow。也就只有古來的靜態頁面纔會不存在repaint和reflow。repaint主要是針對某一個DOM元素進行的重繪，reflow則是迴流，針對整個頁面的重排。字面意思來講：repaint就是重繪，reflow就是迴流。repaint和reflow的目的是：展現一個新的頁面樣貌。

嚴重性：

在性能優先的前提下，性能消耗 reflow大於repaint。

體現：

repaint是某個DOM元素進行重繪；reflow是整個頁面進行重排，也就是頁面全部DOM元素渲染。

如何觸發：

style變更形成repaint和reflow。

不涉及任何DOM元素的排版問題的變更爲repaint，例如元素的color/text-align/text-decoration等等屬性的變更。

除上面所提到的DOM元素style的修改基本爲reflow。例如元素的任何涉及長、寬、行高、邊框、display等style的修改。

常見觸發場景：

1. 觸發repaint：
   1. color的修改，如color=#ddd；
   2. text-align的修改，如text-align=center；
   3. a:hover也會形成重繪。
   4. :hover引發的顏色等不致使頁面迴流的style變更。
   5. 等等太多，一時間寫出來也太難想了。
2. 觸發reflow：
   1. width/height/border/margin/padding的修改，如width=778px；
   2. 動畫，:hover等僞類引發的元素表現改動，display=none等形成頁面迴流；
   3. appendChild等DOM元素操做；
   4. font類style的修改；
   5. background的修改，注意着字面上可能覺得是重繪，可是瀏覽器確實迴流了，通過瀏覽器廠家的優化，部分background的修改只觸發repaint，固然IE不用考慮；
   6. scroll頁面，這個不可避免；
   7. resize頁面，桌面版本的進行瀏覽器大小的縮放，移動端的話，還沒玩過能拖動程序，resize程序窗口大小的多窗口操做系統。
   8. 讀取元素的屬性（這個沒法理解，可是技術達人是這麼說的，那就把它當作定理吧）：讀取元素的某些屬性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；

如何避免：

說避免那是不可能的，否則就是之前古老的靜態頁面了，沒有交互，那在如今看來，就是一個失敗的做品。因此，在咱們進行網頁設計的時候，就必須儘可能減小頁面的repaint和reflow。repaint和reflow的目的是爲了展現一個新的頁面，那麼咱們在進行頁面交互時，儘可能經過各類方法減小repaint和reflow但又能展現一個新的頁面的目的。因此下面將結合其餘技術達人的建議，經過本身的理解，給你們講解如何避免和優化repaint和reflow：

下面是大神Nicole Sullivan的原話：

1. Change classes on the element you wish to style (as low in the dom tree as possible)
2. Avoid setting multiple inline styles
3. Apply animations to elements that are position fixed or absolute
4. Trade smoothness for speed
5. Avoid tables for layout
6. Avoid JavaScript expressions in the CSS (IE only)

1. 儘量在DOM末梢經過改變class來修改元素的style屬性：儘量的減小受影響的DOM元素。
2. 避免設置多項內聯樣式：使用經常使用的class的方式進行設置樣式，以免設置樣式時訪問DOM的低效率。
3. 設置動畫元素position屬性爲fixed或者absolute：因爲當前元素從DOM流中獨立出來，所以受影響的只有當前元素，元素repaint。
4. 犧牲平滑度知足性能：動畫精度太強，會形成更屢次的repaint/reflow，犧牲精度，能知足性能的損耗，獲取性能和平滑度的平衡。
5. 避免使用table進行佈局：table的每一個元素的大小以及內容的改動，都會致使整個table進行從新計算，形成大幅度的repaint或者reflow。改用div則能夠進行鍼對性的repaint和避免沒必要要的reflow。
6. 避免在CSS中使用運算式：學習CSS的時候就知道，這個應該避免，不該該加深到這一層再去了解，由於這個的後果確實很是嚴重，一旦存在動畫性的repaint/reflow，那麼每一幀動畫都會進行計算，性能消耗不容小覷。

參考文獻：

1. 頁面重構應注意的repaint和reflow
2. 如何減小瀏覽器repaint和reflow（上）
3. 迴流與重繪：CSS性能讓JavaScript變慢？
4. Reflows & Repaints: CSS Performance making your JavaScript slow?

 

以爲有用，點個贊，贊贊更健康。