长列表滚动卡顿,内存占用高怎么优化?
我在做一个消息列表页,数据有上千条,即使只渲染可视区域,滚动还是特别卡,而且内存占用一直很高。我试过用 React 的虚拟滚动库,但效果不明显,是不是 CSS 写得有问题?
比如下面这段样式,会不会导致重排或内存泄漏?
.message-list {
height: 100vh;
overflow-y: auto;
will-change: scroll-position;
}
.message-item {
height: 80px;
border-bottom: 1px solid #eee;
}
UI心虹
Lv1
直接这样,确保你的虚拟滚动库配置正确,同时检查是否有不必要的事件监听或者复杂的计算在滚动时触发。再者,审查下CSS,看看有没有可以简化的,比如去掉will-change,因为它可能过度优化导致不必要的重绘。最后,清理下内存,确保没有组件卸载后还持有引用。
点赞
2026-03-21 14:02