當渲染樹中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀、風格，而不會影響布局的操作，比如 background-color，我們將這樣的操作稱為重繪。
當渲染樹中的一部分（或全部）因為元素的規模尺寸、布局、隱藏等改變而需要重新構建的操作，會影響到布局的操作，這樣的操作我們稱為重排。
任何會改變元素幾何資訊（元素的位置和尺寸大小）的操作，都會觸發重排。
（1）新增或者刪除可見的 dom 元素；
（2）元素尺寸改變——邊距、填充、邊框、寬度和高度
（3）內容變化，比如使用者在 input 框中輸入文字
（4）瀏覽器視窗尺寸改變——resize事件發生時
（5）計算 offsetwidth 和 offsetheight 屬性
（6）設定 style 屬性的值
（7）當你修改網頁的預設字型時。
重排必定會發生重繪，重繪不一定會引發重排。重排所需的成本比重繪高的多，改變父節點裡的子節點很可能會導致父節點的一系列重排。
瀏覽器的重繪與重排
在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼，什麼是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程中將重繪和重排引發的效能問...
瀏覽器的重繪與重排
在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼，什麼是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程 中將重繪和重排引發的效能...
瀏覽器的重繪與重排
在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼，什麼是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程中將重繪和重排引發的效能問...