重繪和重排

• 重排(重構/迴流/Reflow)：當渲染樹的一部分必須更新而且節點的尺寸發生了變化，瀏覽器會使渲染樹中受到影響的部分失效，並從新構造渲染樹。
• 重繪(Repaint)：是在一個元素的外觀被改變所觸發的瀏覽器行爲，瀏覽器會根據元素的新屬性從新繪製，使元素呈現新的外觀。好比改變某個元素的背景色、文字顏色、邊框顏色等等

重排

1. 元素寬度、高度改變
2. 新增、刪除可見dom元素
3. 元素的位置改變
4. 瀏覽器窗口尺寸改變
5. 填充內容的改變，好比文本的改變或圖片大小改變而引發的計算值寬度和高度的改變

---

如何避免觸發迴流和重繪

• 避免頻繁使用 style，而是採用修改class的方式。
• 將動畫效果應用到position屬性爲absolute或fixed的元素上。
• 也能夠先爲元素設置display: none，操做結束後再把它顯示出來。由於在display屬性爲none的元素上進行的DOM操做不會引起迴流和重繪
• 使用createDocumentFragment進行批量的 DOM 操做。
• 對於 resize、scroll 等進行防抖/節流處理。
• 避免頻繁讀取會引起迴流/重繪的屬性，若是確實須要屢次使用，就用一個變量緩存起來。
• 利用 CSS3 的transform、opacity、filter這些屬性能夠實現合成的效果，也就是GPU加速。