什么是重排？如何减少重排？

大家好，欢迎来到IT知识分享网。

重排（Reflow）是浏览器重新计算元素的位置和大小，并重新绘制它们的过程。重排通常发生在以下情况下：

通过采取这些措施，可以有效地减少页面的重排次数，提高页面的性能和响应速度。

// 获取需要操作的元素 const container = document.getElementById('container'); const list = document.getElementById('list'); // 缓存查询结果 const containerWidth = container.offsetWidth; // 批量操作 DOM function addItems() { const fragment = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const item = document.createElement('div'); item.className = 'item'; item.textContent = 'Item ' + (i + 1); fragment.appendChild(item); } list.appendChild(fragment); } // 在批量操作 DOM 之后获取新的容器宽度 function getNewContainerWidth() { const newContainerWidth = container.offsetWidth; console.log('Container width after adding items:', newContainerWidth); } // 添加元素按钮点击事件处理函数 document.getElementById('addItemsBtn').addEventListener('click', function() { addItems(); getNewContainerWidth(); });