为什么循环生成大量DOM元素时页面会卡顿？有没有更好的优化方法？

素红🍀 提问于 2026-02-19 10:20:32 阅读 45

优化

我在用JavaScript循环生成2000条带样式的列表项时，页面直接卡住了。尝试把DOM操作移到文档碎片里，渲染完再append，但滑动列表还是会有轻微卡顿。特别是加了CSS过渡效果后更明显：


.list-item {
  transition: all 0.3s;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.list-item:hover {
  background-color: #f0f0f0;
  transform: scale(1.02);
}

用Chrome性能分析发现主要耗时在Paint阶段。试过把过渡效果改成will-change属性，但滚动时帧率还是掉到30多。有没有什么更直接的优化方式？

我来解答赞 15 收藏

反馈

2 条解答

Des.继芳 Lv1

你这问题很典型，2000条带动画的DOM确实扛不住，卡在Paint不是没道理的——每条都有 transition 和 transform，滚动时浏览器要不断重算样式、重绘，GPU也得跟着忙活，帧率掉到30很正常。

先说几个关键点：

第一，别对每条都加 transition: all 0.3s，这个 all 太宽了，尤其 transform 和 opacity 是合成层属性，其他属性一动就触发重绘。改成只监听需要动画的属性，比如 transition: transform 0.3s, opacity 0.3s，避免连带Paint。

第二，滚动时尽量别让 transform 动到非整数像素，比如 scale(1.02) 虽然看起来平滑，但实际会触发子像素渲染，GPU压力大。要么用 scale(1) 和 scale(1.02) 之间加个 will-change: transform，要么干脆改用 opacity 做 hover 效果（更轻量）。

第三，2000条 DOM 本质还是太多，真要流畅，得上虚拟滚动：只渲染可视区域 + 上下缓冲区的 DOM，其他全不渲染，滚动时动态替换内容。比如你窗口只能放 20 条，就只造 30 条左右，滚动时复用 DOM 节点。这玩意儿写起来不复杂，代码放这了：

const container = document.querySelector('.list-container');

const itemHeight = 60; // px，记得加上 padding 和 border

const bufferSize = 10;



function renderVisibleItems() {

  const scrollTop = container.scrollTop;

  const viewportHeight = container.clientHeight;

  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - bufferSize);

  const endIndex = Math.min(totalItems, startIndex + Math.ceil(viewportHeight / itemHeight) + bufferSize * 2);



  // 清空容器，只保留缓冲区

  container.innerHTML = '';



  for (let i = startIndex; i < endIndex; i++) {

    const item = document.createElement('div');

    item.className = 'list-item';

    item.style.transform = translateY(${i * itemHeight}px);

    item.innerText = Item ${i};

    container.appendChild(item);

  }

}



let totalItems = 2000;

container.addEventListener('scroll', () => {

  renderVisibleItems();

});



// 初始渲染

renderVisibleItems();

注意上面是简化版，实际用要处理滚动位置偏移、内容高度变化等边界情况，但思路就是：用绝对定位模拟位置，只渲染必要 DOM。如果不想自己写，直接用 react-window 或 vue-virtual-scroll-list 也行，别自己硬扛。

最后，别忘了在开发时关掉 Chrome 的「显示绘制帧率」和「渲染层边框」，那些调试工具本身也会拖慢帧率，容易误判。

2026-02-26 12:14

打工人彤彤 Lv1

问题出在CSS过渡和大量DOM元素上，Paint和Layout的开销太高了。建议把hover效果改成纯JS处理，减少重绘，再用虚拟列表按需渲染，只保留视口内的DOM。

试试这段代码：

// 虚拟列表核心逻辑

let container = document.getElementById('container');

let itemHeight = 40; // 每个item高度

let visibleCount = Math.ceil(window.innerHeight / itemHeight);



function render(start, end) {

    container.innerHTML = ''; // 清空容器

    for (let i = start; i < end; i++) {

        let item = document.createElement('div');

        item.className = 'list-item';

        item.style.height = itemHeight + 'px';

        item.textContent = 'Item ' + i;

        container.appendChild(item);

    }

}



window.addEventListener('scroll', () => {

    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    let startIndex = Math.floor(scrollTop / itemHeight);

    let endIndex = startIndex + visibleCount;

    render(startIndex, endIndex);

});



// 初始化渲染

render(0, visibleCount);

把CSS里的hover效果移掉，改成鼠标事件动态添加类名，避免全局监听导致重绘。另外，别用transform: scale这种会触发layout的操作，改用更轻量的background-color就够了。

2026-02-19 10:21