TA貢獻1830條經(jīng)驗 獲得超3個贊
DOM布局發(fā)生更改時，就會發(fā)生重排?；亓髟谟嬎闵戏浅０嘿F，因為必須再次計算頁面元素的尺寸和位置，然后才能重新繪制屏幕。
可能導(dǎo)致回流的示例
for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';
document.body.appendChild(newEle);
}
上面的代碼效率很低，每個附加的新段落元素都會導(dǎo)致100個重排過程。
您可以使用以下方法緩解此計算壓力大的過程 .createDocumentFragment()
const docFrag = document.createDocumentFragment();
for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';
docFrag.appendChild(newEle);
}
document.body.appendChild(docFrag);
上面的代碼現(xiàn)在將只使用重排過程1x來創(chuàng)建100個新的段落元素。
重繪只是監(jiān)視器上像素的變化，同時還要加重它的兩個弊端，因為重排在其過程中包括重繪。
舉報