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