请教关于 React 的性能优化

[ericgui]

我们公司做房地产相关的业务，每次 request，最多的时候可以到接近 10 万个 json object
然后把这些 json 到放到地图上

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


请问，一般对这种数据量比较大的情况，有什么优化的技巧？谢谢

[akira]

看下百度地图 谷歌地图他们怎么处理的

[Perry]

Chrome 的 performance tab 看看时间都花在哪了
排查每个 component 是否有多余 render 的情况

[murmur]

肯定得动态渲染啊 你没有用地图的功能 自己在地图上叠加层了么

[zrp1994]

之前做的项目中遇到过类似的问题，需求是在地图上绘制成千上万的坐标点。使用百度、高德、以及天地图时都会出现页面卡顿，而使用谷歌地图则不会出现此问题。当时排查得到的原因是国内的这些地图在绘制时都是直接生成的 HTML 元素覆盖在地图上，大量的元素导致了页面的卡顿。而谷歌地图则是使用的 canvas 绘制，不会产生新的 HTML 元素。

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

如果业务允许的话，还可以使用点聚类来减少需要绘制的点的数量。
https://doc.arcgis.com/zh-cn/maps-for-office/design-and-use/cluster-points.htm

[louieliu]

动态渲染啊 一次性渲染这么多节点肯定消耗性能 再开启硬件加速来辅助

[ericgui]

@murmur 添加了

[ericgui]

@zrp1994 非常感谢，我考虑一下怎么优化，确实是我现在一下子渲染了所有 layer

[murmur]

这种类似 POI 的东西一定要找专门的组件来做，openlayers 这种，什么缩放比例，什么区域显示多少东西都是专门的处理

以前看 D 版的成都地图，有十几个图层，你不做处理的话根本显示不过来

[sakitamFDD]

你们是不是对地图引擎有限制，如果没有的话建议上 mapbox，10w 级以上的数据普通 canvas 渲染压力也是很大的，最好是上 webgl 引擎

[ericgui]

@sakitamFDD 我们就是用 mapbox ..... 现在数据库才两千多，就走肉眼可见的延迟和白屏

[sakitamFDD]

@ericgui emmm，那我觉得你可能使用方式有问题了，他本身如果使用矢量切片的话百万级的数据渲染都是没有问题的，还可以配合 deck.gl ，你可不要说你们使用的是 marker 类😂