當元素的樣式發生變化時，瀏覽器需要觸發更新，重新繪製元素。這個過程中，有兩種類型的操作，即重繪與迴流。
重繪(repaint):
當元素樣式的改變不影響佈局時，瀏覽器將使用重繪對元素進行更新，此時由於只需要UI層面的重新像素繪製，因此 損耗較少
迴流(reflow):
當元素的尺寸、結構或觸發某些屬性時，瀏覽器會重新渲染頁面，稱爲迴流。此時，瀏覽器需要重新經過計算，計算後還需要重新頁面佈局，因此是較重的操作。會觸發迴流的操作:
- 頁面初次渲染
- 瀏覽器窗口大小改變
- 元素尺寸、位置、內容發生改變
- 元素字體大小變化
- 添加或者刪除可見的 dom 元素
- 激活 CSS 僞類（例如：:hover）
- 查詢某些屬性或調用某些方法
clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
getComputedStyle()
getBoundingClientRect()
scrollTo()
迴流必定觸發重繪，重繪不一定觸發迴流。重繪的開銷較小，迴流的代價較高。
最佳實踐:
css
避免使用table佈局
將動畫效果應用到position屬性爲absolute或fixed的元素上
javascript
避免頻繁操作樣式，可彙總後統一 一次修改
儘量使用class進行樣式修改
減少dom的增刪次數，可使用 字符串 或者 documentFragment 一次性插入
極限優化時，修改樣式可將其display: none後修改
避免多次觸發上面提到的那些會觸發迴流的方法，可以的話儘量用 變量存住