V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
salamanderMH
V2EX  ›  问与答

前端页面渲染特别慢?

  •  
  •   salamanderMH · 2019-07-22 16:59:40 +08:00 · 2079 次点击
    这是一个创建于 1952 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题

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

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

    9 条回复    2019-07-25 21:20:09 +08:00
    azh7138m
        1
    azh7138m  
       2019-07-22 17:46:19 +08:00
    列表是啥?如果你是说大 Table 的问题,那目前是没救的。
    demo 也不给,测试数据也没有,debug 全靠猜?
    wszgrcy
        2
    wszgrcy  
       2019-07-22 17:50:38 +08:00 via Android
    你要说列表的话,当然是虚拟滚动性能最好了
    salamanderMH
        3
    salamanderMH  
    OP
       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
        4
    azh7138m  
       2019-07-23 14:54:55 +08:00
    https://codesandbox.io
    你这么写,是没法 debug 的
    salamanderMH
        5
    salamanderMH  
    OP
       2019-07-25 16:00:09 +08:00
    @azh7138m https://codesandbox.io/embed/compassionate-aryabhata-tsmo3
    大致例子就这样,只是实际 List 中元素多一点
    azh7138m
        6
    azh7138m  
       2019-07-25 18:19:03 +08:00
    @salamanderMH key 用 id,item 固定高度,我这边感觉还能看
    我觉得是实际 item 会很复杂,一次渲染那么多浏览器也吃不消
    azh7138m
        7
    azh7138m  
       2019-07-25 19:26:45 +08:00
    csb 的代码,初始 12M,每次翻页增加 5M,感觉还行,中间不会无故增加,你那么多内存占用我觉得是因为跑在 dev 模式下,prod 下看没啥问题
    salamanderMH
        8
    salamanderMH  
    OP
       2019-07-25 19:58:36 +08:00
    @azh7138m 感谢指导,这种有类似 Android 的回收机制吗?
    azh7138m
        9
    azh7138m  
       2019-07-25 21:20:09 +08:00
    回收啥,都在页面上要展示的。。。看内存消耗几乎都是 react-dom,优化只能是 2L 说的,用 https://github.com/bvaughn/react-virtualized 这种方案
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2905 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 14:30 · PVG 22:30 · LAX 06:30 · JFK 09:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.