Repaint又叫Redraw,重繪,它是指一種不影響當前dom結構的和佈局的一種重繪動作。
以下的動作都會促發Repaint:
- 不可見或可見(visibility);
- 顏色和圖片改變(background,border-color,color之類的屬性);
- 不改變頁面元素大小,形狀和位置,但改變其外觀的變化。
Reflow,又叫重構, 比起 Repaint 來講就是一種更加顯著的變化了。它主要發生在 DOM 樹被操作的時候,任何改變 DOM 的結構和佈局都會產生 Reflow。但一個元素的 Reflow 操作發生時,它的所有父元素和子元素都會發生 Reflow,最後 Reflow 必然會導致 Repaint 的產生。
以下的動作都會促發Reflow:
- 瀏覽器窗口的變化;
- DOM 節點的添加刪除操作;
- 一些改變頁面元素大小,形狀和位置的操作的觸發。
每次 Reflow 比其 Repaint 會帶來更多的資源消耗,我們應該儘量減少 Reflow 的發生。
參考:http://www.cnblogs.com/sniper007/archive/2012/12/24/2831328.html