前端页面渲染特别慢？

[salamanderMH]

问题

用的是Ant Pro Design这个架子，往下刷列表的时候，发现内存增涨特别快，而且元素渲染出来也有点慢

用这个架子也是为了图快，应该是对 React 的使用不到位，各位有好的建议吗？

[azh7138m]

列表是啥？如果你是说大 Table 的问题，那目前是没救的。
demo 也不给，测试数据也没有，debug 全靠猜？

[wszgrcy]

你要说列表的话，当然是虚拟滚动性能最好了

[salamanderMH]

@azh7138m
```
<InfiniteScroll
initialLoad={false}
loadMore={this.fetchHots}
hasMore={!loading && hasMore}
useWindow
>
<List
dataSource={items}
itemLayout="vertical"
loading={items.length === 0 && !!loading}
renderItem={item => <ItemWrapper myData={item} />}
/>
{!!loading && items.length > 0 ? (
<div style={{ textAlign: 'center' }}>
<Spin />
</div>
) : null}
</InfiniteScroll>

```
就是这么一个组件渲染的

[azh7138m]

https://codesandbox.io 请
你这么写，是没法 debug 的

[salamanderMH]

@azh7138m https://codesandbox.io/embed/compassionate-aryabhata-tsmo3
大致例子就这样，只是实际 List 中元素多一点

[azh7138m]

@salamanderMH key 用 id，item 固定高度，我这边感觉还能看
我觉得是实际 item 会很复杂，一次渲染那么多浏览器也吃不消

[azh7138m]

csb 的代码，初始 12M，每次翻页增加 5M，感觉还行，中间不会无故增加，你那么多内存占用我觉得是因为跑在 dev 模式下，prod 下看没啥问题

[salamanderMH]

@azh7138m 感谢指导，这种有类似 Android 的回收机制吗？

[azh7138m]

回收啥，都在页面上要展示的。。。看内存消耗几乎都是 react-dom，优化只能是 2L 说的，用 https://github.com/bvaughn/react-virtualized 这种方案