长列表滚动卡顿,内存占用高怎么优化?

上官卫红 阅读 4

我在做一个消息列表页,数据有上千条,即使只渲染可视区域,滚动还是特别卡,而且内存占用一直很高。我试过用 React 的虚拟滚动库,但效果不明显,是不是 CSS 写得有问题?

比如下面这段样式,会不会导致重排或内存泄漏?

.message-list {
  height: 100vh;
  overflow-y: auto;
  will-change: scroll-position;
}
.message-item {
  height: 80px;
  border-bottom: 1px solid #eee;
}
我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
UI心虹
UI心虹 Lv1
直接这样,确保你的虚拟滚动库配置正确,同时检查是否有不必要的事件监听或者复杂的计算在滚动时触发。再者,审查下CSS,看看有没有可以简化的,比如去掉will-change,因为它可能过度优化导致不必要的重绘。最后,清理下内存,确保没有组件卸载后还持有引用。
点赞
2026-03-21 14:02