概念：
重排：節點的幾何屬性發生改變，比如改變元素的寬高、位置，DOM樹重新排列，導致瀏覽器重新計算節點的幾何屬性。
重繪：節點的外觀樣式發生改變，瀏覽器將重新渲染的樹渲染到屏幕。
完成重排后，要將重新構建的渲染樹渲染到屏幕上。因此重排一定重繪，重繪不一定重排。
重排因為要重新計算 Render Tree ，而且每一個 DOM Tree 都有一個 layout 方法，一旦某個節點發生重排，就有可能導致子元素和父元素甚至是同級其他元素的 layout ，浪費大量的時間重新驗證 Render Tree 。因此，成本要比重繪高很多。
觸發重排的條件：
- 元素的尺寸發生變化；
- 元素的位置發生變化；
- DOM樹的結構發生變化；
- 調整瀏覽器窗口；
- 獲取某些元素屬性。
性能優化
重排、重繪，會影響到瀏覽器的性能，給用戶的感覺就是網頁訪問慢，或者網頁會卡頓，不流暢，從而使網頁訪問量下降。
- 通過切換類名改變樣式；
通過修改類名，批量修改樣式，減少重繪。
- 批量操作DOM；
核心思想：讓該元素脫離文檔流、對其進行多重改變、將元素帶回文檔中。
打個比方，我們主機硬盤出現了故障，常見的辦法就是把硬盤卸下來，用專業的工具測試哪里有問題，待修復后再安裝上去，而不是直接在主板上面用螺絲刀弄來弄去。
- 緩存布局信息；
比如我現在要得到頁面ul節點下面的100個li節點，最好的辦法就是第一次獲取后就保存起來，減少DOM的訪問以提升性能，緩存布局信息也是同樣的概念。
- 使用 resize 事件時，做防抖和節流處理。