小程序页面频繁渲染导致卡顿，怎么优化？

Des.风珍提问于 2026-01-29 13:17:31 阅读 36

移动

在开发小程序时遇到一个性能问题，页面列表滑动时特别卡顿。我尝试过用setData防抖和减少数据更新频率，但效果不明显。比如这个列表渲染逻辑：


Page({
  onScroll() {
    this.setData({ scrollTop: wx.createSelectorQuery().scrollOffset().exec() })
  },
  updateList(newItems) {
    this.setData({ list: newItems })
  }
})

滑动时每帧都会触发setData，但即使加了节流还是卡。有没有更彻底的优化方法？比如动态加载或渲染机制调整？

打包优化

我来解答赞 7 收藏

反馈

2 条解答

Tr° 文君 Lv1

你这个写法确实会卡，每次滑动都触发 setData 太频繁了。试试用虚拟列表吧，只渲染可见区域的内容，能大幅减少重绘。这里有份简单实现：

Page({

  data: {

    list: [], // 数据源

    visibleCount: 10, // 可见项数

    scrollTop: 0

  },

  onScroll(e) {

    const start = Math.floor(e.detail.scrollTop / 50); // 假设每项高度50px

    this.setData({ visibleList: this.data.list.slice(start, start + this.data.visibleCount) });

  },

  onLoad() {

    this.setData({ list: Array.from({ length: 100 }, (_, i) => Item ${i}) });

  }

});

另外，别在 onScroll 里直接用 query，性能很差。

2026-02-02 02:03

极客冠羽 Lv1

你这个卡顿问题确实挺常见的，小程序里频繁调用 setData 是性能杀手。先说结论：你的 onScroll 和 updateList 写法有问题，尤其是 onScroll 里直接调用了 setData，这是大忌。

### 原因分析
1. 滑动时 onScroll 会高频触发，每次触发都调用 setData，导致页面频繁重绘。
2. wx.createSelectorQuery().scrollOffset().exec() 这个操作本身也有性能开销，你在滑动过程中反复执行查询，简直是雪上加霜。
3. 即使加了节流，但节流的时间间隔可能还是不够长，或者没有真正减少不必要的 setData 调用。

### 解决方案
下面给你一个更合理的实现方式：

#### 1. 避免在滚动事件中直接调用 setData
可以使用局部变量缓存滚动状态，等到必要时再统一更新数据：

Page({

  data: {

    scrollTop: 0,

    list: []

  },

  onScroll(event) {

    this._scrollTop = event.detail.scrollTop; // 先缓存到局部变量

    clearTimeout(this._scrollTimeout); // 防止重复定时器

    this._scrollTimeout = setTimeout(() => {

      this.setData({ scrollTop: this._scrollTop });

    }, 16); // 16ms对应大约60fps

  },

  updateList(newItems) {

    // 如果新数据和旧数据差异不大，就不要频繁更新

    if (JSON.stringify(this.data.list) !== JSON.stringify(newItems)) {

      this.setData({ list: newItems });

    }

  }

});

#### 2. 使用虚拟列表（Virtual List）
如果列表数据量很大，建议改用虚拟列表技术。只渲染当前可视区域的项目，其他部分不渲染，这样能极大减少 DOM 操作。
可以用现成的库，比如 @tarojs/components 中的虚拟列表组件，或者自己实现一个简单的版本。

#### 3. 减少不必要的重新渲染
确保只有当数据真的发生变化时才调用 setData，像上面代码里的 JSON.stringify 比较是一种简单粗暴的方式，实际可以根据业务逻辑优化。

最后提醒一下，小程序性能优化是个系统工程，不能光靠节流防抖解决所有问题。平时多关注下 wx.profiler 的性能数据，看看哪些地方是瓶颈，针对性优化会事半功倍。

2026-01-29 21:13