前端性能優化之理解JavaScript的重排和重繪

一. 什麼是重排，重繪 ？

重排： 重新渲染DOM樹。
當渲染樹中元素的佈局，隱藏等發生改變時, 會發生重繪即迴流(reflow)。每個頁面至少需要一次迴流，就是在頁面第一次加載的時候。

重繪：元素外觀發生改變。
當盒子的顏色、字體大小等發生改變時瀏覽器會重新繪製該元素，將內容呈現在頁面上。(改變元素外觀屬性。如：color，background-color等會觸發重排)

• 重排必定會引發重繪，但重繪不一定會引發重排
• 重排重繪都比較影響性能，但是重排相對來說更費性能

---

二. 什麼時候發生重排，重繪？

1. 重排：元素佈局發生改變，如：
   （1）display：none；
   （2）節點的創建與刪除
   （3）邊距，邊框，寬高發生改變
   （4）獲取窗口的屬性以及改變
2. 重繪：元素外觀發生改變
   （1）背景顏色發生改變
   （2）字體大小發生改變

---

三. 怎麼減少重排，重繪 ？

1. 若要發生多次重排，使該元素脫離文檔流之後在進行操作，這樣就只會發生兩次重排。
2. 把經常用的瀏覽器的值獲取一次之後就緩存到變量中。
3. 分離讀寫操作。