重排和重繪

重繪與重排的

• 重排: 部分渲染樹（或者整個渲染樹）需要重新分析並且節點尺寸需要重新計算，表現為重新生成佈局，重新排列元素
• 重繪: 由於節點的幾何屬性發生改變或者由於樣式發生改變，例如改變元素背景色時，螢幕上的部分內容需要更新，表現為某些元素的外觀被改變

單單改變元素的外觀，肯定不會引起網頁重新生成佈局，但當瀏覽器完成重排之後，將會重新繪製受到此次重排影響的部分

重排和重繪代價是高昂的，它們會破壞使用者體驗，並且讓UI展示非常遲緩，而相比之下重排的效能影響更大，在兩者無法避免的情況下，一般我們寧可選擇代價更小的重繪。

『重繪』不一定會出現『重排』，『重排』必然會出現『重繪』。

如何觸發重排和重繪？

任何改變用來構建渲染樹的資訊都會導致一次重排或重繪：

• 新增、刪除、更新DOM節點
• 透過display: none隱藏一個DOM節點-觸發重排和重繪
• 移動或者給頁面中的DOM節點新增動畫
• 新增一個樣式表，調整樣式屬性
• 使用者行為，例如調整視窗大小，改變字號，或者滾動。
• 透過visibility: hidden; opacity: 0隱藏一個DOM節點-只觸發重繪，因為沒有幾何變化