關於repaint 重繪 和reflow 回流

repaint就是重繪，reflow就是回流。repaint主要是針對某乙個dom元素進行的重繪，reflow則是回流，針對整個頁面的重排

嚴重性：

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

repaint是某個dom元素進行重繪；reflow是整個頁面進行重排，也就是頁面所有dom元素渲染。

style變動造成repaint和reflow。

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

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

1.color的修改，如color=#ddd；

2.text-align的修改，如text-align=center；

3.a:hover也會造成重繪；

4.:hover引起的顏色等不導致頁面回流的style變動。

觸發reflow：

1.width/height/border/margin/padding的修改，如width=778px

2.動畫，:hover等偽類引起的元素表現改動，display=none等造成頁面回流；

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))；

如何避免：

Reflow 回流 和Repaint 重繪

首先我們要明白的是，頁面的顯示過程分為以下幾個階段 1 生成dom樹 包括display none的節點 2 在dom樹的基礎上根據節點的集合屬性 margin,padding,width,height等 生成render樹 不包括display none，head節點，但是包括visibility...

回流 reflow 和重繪 repaint

首先先介紹瀏覽器解析的工作原理 1.解析html文件建立dom樹 2.解析css 包含外部css以及js生成的 構建渲染樹，計算出節點的樣式 3.布局渲染樹，以根節點遞迴呼叫，計算每乙個節點的大小，位置等，給出每乙個節點出現在螢幕的精準目標 4.繪製渲染樹，遍歷渲染樹，每個幾點使用ui後端層來繪製 ...

重排 reflow 和重繪 repaint

什麼是重排 引起dom樹重新計算的行為。什麼時候會發生重排 新增或刪除可見的dom元素 元素的位置改變 元素的尺寸大小改變 元素的內容改變 頁面渲染初始化 瀏覽器視窗尺寸改變 什麼是重繪 元素可見的外觀被改變，但並沒有影響到布局 什麼時候會發生重繪 dom元素的字型顏色 改變visibility o...