Reflow和Repaint

Reflow

當涉及到DOM節點的佈局屬性發生變化時，就會從新計算該屬性，瀏覽器會從新描繪相應的元素，此過程叫Reflow（迴流或重排）。

Repaint

當影響DOM元素可見性的屬性發生變化 (如 color) 時, 瀏覽器會從新描繪相應的元素, 此過程稱爲Repaint（重繪）。所以重排必然會引發重繪。

引發Repaint和Reflow的一些操做

• 調整窗口大小
• 字體大小
• 樣式表變更
• 元素內容變化，尤爲是輸入控件
• CSS僞類激活，在用戶交互過程當中發生
• DOM操做，DOM元素增刪、修改
• width, clientWidth, scrollTop等佈局寬高的計算

Repaint和Reflow是不可避免的，只能說對性能的影響減到最小，給出下面幾條建議：

• 避免逐條更改樣式。建議集中修改樣式，例如操做className。
• 避免頻繁讀取元素幾何屬性（例如scrollTop）。絕對定位具備複雜動畫的元素。絕對定位使它脫離文檔流，避免引發父元素及後續元素大量的迴流