觸發重排的操作
- 頁面的初次渲染
- DOM樹的結構變化，包括添加、刪除dom元素
- 獲取某些屬性，包括offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()，獲取時應當做適當的緩存
- 改變元素位置（未脫離文檔流的情況下）
- DOM元素的幾何屬性變化（高度，寬度，padding，margin等）
- 元素內容改變
- 調整縮放，觸發resize
優化方案
- 將改變樣式的屬性儘可能集中放置
- 對獲取時會觸發重排的屬性進行緩存（運行時允許的情況下）
- 需要改變多個樣式的時候，利用切換class來實現
- 部分元素脫離文檔流操作
- 添加和刪除dom節點時，儘可能放在一起操作，比如添加一張表單的時候，直接在內存中準備好整個表單的dom元素插入，而不是用遍歷的方式多次插入。
脫離文檔流的情況
元素脫離文檔留時，其自身的變化只會導致自身的重排，而不會影響其他元素，所以對於需要經常重繪的元素，可以將position設置爲absolute或fixed，脫離文檔流。
場景
- 列表排序，先獲取列表dom節點，在內存中排序，然後一次性渲染，可以顯著減少重排次數。