移动端列表滚动卡顿，优化后还是不流畅怎么办？

你这个方案其实已经挺接近虚拟滚动了，但问题出在：你还是在一次性渲染所有 DOM 节点，只是把视口外的挪出屏幕了，DOM 数量没减，浏览器重排重绘压力还在。

真要解决卡顿，得从两个方向动手：

一是减少 DOM 节点数量，只渲染视口 + 缓冲区的元素（比如 500 条里只渲染 15 条），用 transform: translateY 移动整个列表容器的位置，而不是给每个 item 定位。

二是避免触发重排，你的 top: calcTop(item) 每次滚动都在改 top 值，哪怕用了 will-change，也容易被浏览器认定为需要重排，而 transform: translateY 才是纯合成层移动，GPU 加速，不触发 layout。

复制过去试试这个简化版结构：

<div class="scroll-container" ref="container" @scroll="onScroll">

  <div class="virtual-list" :style="{ transform: translateY(${translateY}px) }">

    <div 

      v-for="item in visibleItems" 

      class="list-item"

      :key="item.id"

      :style="{ height: itemHeight + 'px' }"

    >

      {{ item.text }}

    </div>

  </div>

</div>

JS 逻辑（以 Vue 为例）：

data() {

  return {

    itemHeight: 60,

    bufferSize: 10,

    translateY: 0

  }

},

computed: {

  visibleItems() {

    const containerHeight = this.$refs.container?.offsetHeight || 0

    const start = Math.max(0, Math.floor(this.scrollTop / this.itemHeight) - this.bufferSize)

    const count = Math.ceil(containerHeight / this.itemHeight) + this.bufferSize * 2

    return this.items.slice(start, start + count)

  },

  scrollTop() {

    return this.$refs.container?.scrollTop || 0

  }

},

methods: {

  onScroll() {

    this.translateY = -this.scrollTop

  }

}

注意几点：

- 不要用 v-for 直接绑定整个 items，必须用 visibleItems 这种计算出来的子集
- translateY 是负值，因为要往上推列表
- bufferSize 根据滚动体验调，别太小（会闪）也别太大（DOM 多了又卡）

另外如果你用了 Vue 或 React，记得给 visibleItems 里的每个 item 加唯一 key，避免 diff 时误删重绘。

如果还是卡，检查下：

1. 每个 item 里有没有复杂动画（比如 transition、animation）
2. 有没有在滚动时做重计算（比如 getBoundingClientRect、offsetTop 这类同步布局读写）
3. 是否用了 position: fixed 的元素在滚动容器里（这会强制浏览器回流）

最后提醒一句：移动端真别信 will-change 能救一切，它只是个提示，浏览器未必采纳，关键还是得减少 DOM 数量 + 用 transform。

你这个情况，50条列表就卡顿，很明显是渲染压力太大了。光靠 display: none 和 position: absolute 是不够的，得用更高效的方案：虚拟列表。

简单说下思路：只渲染视口内可见的几条数据，其他的先不渲染。当用户滚动时，动态计算哪些数据需要显示，更新 DOM。这样任何时候 DOM 树都很小，效率更高。

给你个简单的实现例子：

class VirtualList {

  constructor(container, items, itemHeight) {

    this.container = container;

    this.items = items;

    this.itemHeight = itemHeight;



    this.render();

    this.bindScroll();

  }



  render() {

    const visibleCount = Math.ceil(this.container.clientHeight / this.itemHeight) + 2;

    this.visibleItems = Array(visibleCount).fill(null).map(() => document.createElement('div'));

    this.visibleItems.forEach(item => this.container.appendChild(item));

  }



  bindScroll() {

    let lastTime = 0;

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

      const now = Date.now();

      if (now - lastTime < 16) return; // 避免高频触发

      lastTime = now;



      const start = Math.floor(this.container.scrollTop / this.itemHeight);

      this.updateVisibleItems(start);

    });

  }



  updateVisibleItems(startIndex) {

    this.visibleItems.forEach((item, i) => {

      const index = startIndex + i;

      if (index < this.items.length) {

        item.textContent = this.items[index];

        item.style.top = index * this.itemHeight + 'px';

        item.style.position = 'absolute';

      }

    });

  }

}



// 使用示例

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

new VirtualList(container, Array.from({ length: 1000 }, (_, i) => Item ${i}), 50);

注意：
1. 这里假设每个列表项高度固定，如果高度不固定会复杂一些。
2. 滚动事件加了简单防抖，避免掉帧。
3. 如果用框架（比如 Vue/React），可以用类似逻辑封装成组件。

试试这个方案，性能应该能提升不少。要是还卡，可能得看设备性能或者其他地方有没有问题了。