重繪和回流：為什么要避免頻繁發生？
在前端開發中，我們經常會聽到兩個概念：重繪和回流。它們是指瀏覽器對頁面進行渲染時的兩個關鍵過程。重繪是指當元素的外觀發生變化，需要更新顯示時進行的過程；回流是指當元素的幾何屬性發生變化，需要重新計算布局并重新繪制的過程。
重繪和回流都是非常消耗性能的操作，頻繁發生會導致頁面的性能下降，甚至造成卡頓和頁面加載速度變慢。所以，我們在開發中要盡量避免頻繁發生重繪和回流。接下來，讓我們來看一些常見的導致重繪和回流的情況，并介紹如何避免它們。
- 避免頻繁修改 DOM 元素的樣式
當我們頻繁修改 DOM 元素的樣式時，瀏覽器會頻繁地觸發重繪和回流。因此，在修改 DOM 元素的樣式時，最好將修改操作合并到一起，通過修改元素的 class 名稱來實現樣式切換，這樣可以減少重繪和回流的次數。
// 不推薦寫法
var element = document.getElementById('example');
element.style.width = '100px';
element.style.height = '100px';
element.style.backgroundColor = 'red';
// 推薦寫法
var element = document.getElementById('example');
element.classList.add('active');
登錄后復制
- 使用 transform 屬性來替代 top/left 屬性
當使用 top/left 屬性來改變元素的位置時，會觸發重繪和回流。而使用 transform 屬性（如 translateX/translateY）來改變元素的位置，則不會觸發回流，只會觸發重繪。因此，在需要改變元素位置時，最好使用 transform 屬性。
// 不推薦寫法
var element = document.getElementById('example');
element.style.left = '100px';
element.style.top = '100px';
// 推薦寫法
var element = document.getElementById('example');
element.style.transform = 'translate(100px, 100px)';
登錄后復制
- 避免頻繁讀取元素的尺寸屬性
每次讀取元素的尺寸屬性（如 offsetWidth、offsetHeight）都會觸發回流，而且讀取這些屬性的值是比較消耗性能的操作。因此，我們應該盡量避免頻繁讀取元素的尺寸屬性，可以將這些值緩存起來，或者在必要時一次性地獲取它們。
// 不推薦寫法
var element = document.getElementById('example');
var width = element.offsetWidth;
var height = element.offsetHeight;
// 推薦寫法
var element = document.getElementById('example');
var rect = element.getBoundingClientRect();
var width = rect.width;
var height = rect.height;
登錄后復制
- 使用 documentFragment 來優化多次插入節點
插入節點是會觸發回流的操作，如果需要多次插入節點，最好使用 documentFragment 來優化，將多個節點添加到 documentFragment 中，然后再一次性地插入到 DOM 中。
// 不推薦寫法
for (var i = 0; i < 10; i++) {
var element = document.createElement('div');
document.body.appendChild(element);
}
// 推薦寫法
var fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
var element = document.createElement('div');
fragment.appendChild(element);
}
document.body.appendChild(fragment);
登錄后復制
通過以上幾個方面的優化，我們可以有效地減少重繪和回流的次數，提高頁面的性能和用戶體驗。在實際開發中，我們還可以使用一些工具和庫來幫助我們檢測和優化重繪和回流問題，如 Chrome DevTools 和性能分析工具等。
總結一下，重繪和回流是影響頁面性能的重要因素，在前端開發中要盡量避免頻繁發生。通過合并樣式修改、使用 transform 屬性、避免頻繁讀取尺寸屬性和使用 documentFragment 來優化多次插入節點等方法，我們可以有效地優化頁面性能，提升用戶體驗。
