Reflow 與 Repaint 這兩個東西跟瀏覽器有著密切的關系， Repaint 是指瀏覽器重新繪出一張新的頁面，通常發生在網頁中的 HTML Element Style 遇到變更；而 Reflow 則是指瀏覽器重新計算 HTML Element 的坐標位置。
以網頁效能的觀點來看，Reflow 必需重新計算 Elements 的相對座標位置與長寬，然後再觸發 Repaint 行為，所以會比單純的 Repaint 用掉更多的效能。
Repaint
Repaint 事件發生於 HTML Element 外觀有變化，但是寬、高、坐標沒有變更，例如 color (文字顏色)，background-color (背影色)，visibility 等 CSS 屬性。
以下是會觸發 Repaint 的行為：
- Scrolling - 移動視窗捲軸
- 修改 CSS 屬性 - visibility, color, background-color
Reflow
Reflow 是指瀏覽器重新計算 HTML Element 的坐標位置與寬，高，當下一次的 re-rendering 發生，就能夠重新定位頁面上的 HTML Element，當 Reflow 發生時，它會中斷 Browser 的所有行為，有利於工程師了解如何優化 Reflow 時間與 Reflow 對頁面操作的影響。
當一個 HTML Element 發生 Reflow 事件時，它的 "Parent Element" 以及 "Parent's Parent Element" 或是 "Child Element" 都有可能會一併發生 Reflow 事件來重新計算坐標，所以 Reflow 次數太多，會嚴重影響效能。
大部分 User 的操作行為與 HTML Element 的變更，都會觸發 Reflow 事件，例如下列幾種：
- Window Resizing - 變更 window 的尺寸
- 用 JavaScript 修改 CSS computed styles or inline styles
- 在 DOM 中新增、移除 HTML Element
- 修改 Element 的 className，並包含下列其中一種 style 變更
- display
- padding
- margin
- width
- height
- font-size
優化網頁效能
Reflow 與 Repaint 太多會影響效能，那麼我們就要想辦法減少 Reflow & Repaint 的發生機會。
- 減少 HTML Element 的深度
- 減少 CSS 規則
- 不要一行一行的設定 css style ，改用 CSS ruleset (className) 取代 inline styles.
- 針對 Animation 的使用，建議用絕對座標來定位如 position: absolute, fixed
- 使用 JS 建立 Element 時，一定要用 documentFragment
- 不要使用太大型的 Table ， 因為 Table 中的任何一個 Element 被修改，都會導致整個 Table 重新 render
備註
- DOM : Document Object Model
- Computed styles & inline styles