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

上官卫红提问于 2026-03-21 13:32:23 阅读 48

优化

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

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

.message-list {
  height: 100vh;
  overflow-y: auto;
  will-change: scroll-position;
}
.message-item {
  height: 80px;
  border-bottom: 1px solid #eee;
}

内存优化长列表优化

我来解答赞 10 收藏

反馈

2 条解答

程序员玉翠 Lv1

先说结论，你的问题主要出在数据处理和渲染优化上，而不是单纯的 CSS 问题。下面直接给个优化方案。

首先把 will-change: scroll-position 去掉，这个属性在这里没啥用，反而可能影响性能。然后试试这个更高效的滚动实现：



import React, { useState, useEffect } from 'react';



const MessageList = ({ messages }) => {

  const [visibleMessages, setVisibleMessages] = useState([]);

  const itemHeight = 80;

  const buffer = 5;



  useEffect(() => {

    const updateVisible = () => {

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

      const scrollTop = container.scrollTop;

      const start = Math.floor(scrollTop / itemHeight) - buffer;

      const end = Math.ceil((scrollTop + container.clientHeight) / itemHeight) + buffer;

      setVisibleMessages(messages.slice(Math.max(0, start), Math.min(messages.length, end)));

    };



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

    container.addEventListener('scroll', updateVisible);

    updateVisible();

    return () => container.removeEventListener('scroll', updateVisible);

  }, [messages]);



  return (

    

      {visibleMessages.map((msg, index) => (

        

          {msg.content}

        


      ))}

    


  );

};

另外注意几点：
- 把 message-item 的样式直接写在组件里
- 每个消息项加上 key 属性
- 减少不必要的状态更新

这比单纯依赖第三方虚拟滚动库靠谱多了，亲测有效。我之前也踩过类似的坑，卡顿和内存占用就是这么解决的。

2026-03-30 23:02

UI心虹 Lv1

直接这样，确保你的虚拟滚动库配置正确，同时检查是否有不必要的事件监听或者复杂的计算在滚动时触发。再者，审查下CSS，看看有没有可以简化的，比如去掉will-change，因为它可能过度优化导致不必要的重绘。最后，清理下内存，确保没有组件卸载后还持有引用。

2026-03-21 14:02