前端页面渲染特别慢?

2019-07-22 16:59:40 +08:00
 salamanderMH

问题

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

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

2076 次点击
所在节点    问与答
9 条回复
azh7138m
2019-07-22 17:46:19 +08:00
列表是啥?如果你是说大 Table 的问题,那目前是没救的。
demo 也不给,测试数据也没有,debug 全靠猜?
wszgrcy
2019-07-22 17:50:38 +08:00
你要说列表的话,当然是虚拟滚动性能最好了
salamanderMH
2019-07-23 13:40:40 +08:00
@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
2019-07-23 14:54:55 +08:00
https://codesandbox.io
你这么写,是没法 debug 的
salamanderMH
2019-07-25 16:00:09 +08:00
@azh7138m https://codesandbox.io/embed/compassionate-aryabhata-tsmo3
大致例子就这样,只是实际 List 中元素多一点
azh7138m
2019-07-25 18:19:03 +08:00
@salamanderMH key 用 id,item 固定高度,我这边感觉还能看
我觉得是实际 item 会很复杂,一次渲染那么多浏览器也吃不消
azh7138m
2019-07-25 19:26:45 +08:00
csb 的代码,初始 12M,每次翻页增加 5M,感觉还行,中间不会无故增加,你那么多内存占用我觉得是因为跑在 dev 模式下,prod 下看没啥问题
salamanderMH
2019-07-25 19:58:36 +08:00
@azh7138m 感谢指导,这种有类似 Android 的回收机制吗?
azh7138m
2019-07-25 21:20:09 +08:00
回收啥,都在页面上要展示的。。。看内存消耗几乎都是 react-dom,优化只能是 2L 说的,用 https://github.com/bvaughn/react-virtualized 这种方案

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/585146

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX