V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ericgui
V2EX  ›  React

请教关于 React 的性能优化

  •  
  •   ericgui · 2020-02-29 04:26:16 +08:00 · 3516 次点击
    这是一个创建于 1730 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我们公司做房地产相关的业务,每次 request,最多的时候可以到接近 10 万个 json object
    然后把这些 json 到放到地图上

    我们发现这些 json 本身问题不大,不会造成性能问题
    但是,根据这些 json,我猜测(可能是错的),由于生成了很多 react component,以及其他的各种 object
    所以导致现在性能下降厉害


    请问,一般对这种数据量比较大的情况,有什么优化的技巧?谢谢
    11 条回复    2020-02-29 09:59:09 +08:00
    akira
        1
    akira  
       2020-02-29 04:38:55 +08:00
    看下百度地图 谷歌地图他们怎么处理的
    Perry
        2
    Perry  
       2020-02-29 04:43:52 +08:00
    Chrome 的 performance tab 看看时间都花在哪了
    排查每个 component 是否有多余 render 的情况
    murmur
        3
    murmur  
       2020-02-29 07:50:24 +08:00
    肯定得动态渲染啊 你没有用地图的功能 自己在地图上叠加层了么
    zrp1994
        4
    zrp1994  
       2020-02-29 08:32:59 +08:00
    之前做的项目中遇到过类似的问题,需求是在地图上绘制成千上万的坐标点。使用百度、高德、以及天地图时都会出现页面卡顿,而使用谷歌地图则不会出现此问题。当时排查得到的原因是国内的这些地图在绘制时都是直接生成的 HTML 元素覆盖在地图上,大量的元素导致了页面的卡顿。而谷歌地图则是使用的 canvas 绘制,不会产生新的 HTML 元素。

    除了 canvas 绘制这一点之外,我还建议你不要绘制 Offscreen canvas 的元素,也就是可视区域外的元素不选择渲染。当可视区域改变时再判断是否需要渲染。至于说判断可视区域改变时那些元素需要改变渲染这方面的优化,可以使用一些空间索引及算法,例如四叉树等等。不过应该不用复杂到这一步。

    如果业务允许的话,还可以使用点聚类来减少需要绘制的点的数量。
    https://doc.arcgis.com/zh-cn/maps-for-office/design-and-use/cluster-points.htm
    louieliu
        5
    louieliu  
       2020-02-29 08:34:35 +08:00 via iPhone
    动态渲染啊 一次性渲染这么多节点肯定消耗性能 再开启硬件加速来辅助
    ericgui
        6
    ericgui  
    OP
       2020-02-29 08:52:48 +08:00
    @murmur 添加了
    ericgui
        7
    ericgui  
    OP
       2020-02-29 08:57:47 +08:00
    @zrp1994 非常感谢,我考虑一下怎么优化,确实是我现在一下子渲染了所有 layer
    murmur
        8
    murmur  
       2020-02-29 09:28:12 +08:00
    这种类似 POI 的东西一定要找专门的组件来做,openlayers 这种,什么缩放比例,什么区域显示多少东西都是专门的处理

    以前看 D 版的成都地图,有十几个图层,你不做处理的话根本显示不过来
    sakitamFDD
        9
    sakitamFDD  
       2020-02-29 09:39:53 +08:00 via Android
    你们是不是对地图引擎有限制,如果没有的话建议上 mapbox,10w 级以上的数据普通 canvas 渲染压力也是很大的,最好是上 webgl 引擎
    ericgui
        10
    ericgui  
    OP
       2020-02-29 09:41:06 +08:00 via Android
    @sakitamFDD 我们就是用 mapbox ..... 现在数据库才两千多,就走肉眼可见的延迟和白屏
    sakitamFDD
        11
    sakitamFDD  
       2020-02-29 09:59:09 +08:00 via Android
    @ericgui emmm,那我觉得你可能使用方式有问题了,他本身如果使用矢量切片的话百万级的数据渲染都是没有问题的,还可以配合 deck.gl ,你可不要说你们使用的是 marker 类😂
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2766 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 08:18 · PVG 16:18 · LAX 00:18 · JFK 03:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.