repaint,reflow重繪 重排辨析

前端

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變動。
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))；

爲HTML標籤使用fixed或absolute的position，那麼修改他們的CSS是不會reflow的