如何定位解决前端大数据量渲染下的性能问题

背景

最近实现如下图所示的一个简单功能：

• 表格数据全量展示，不分页
• 地图画出左侧表格所有站点列表对应的marker

技术栈：

• 表格使用antd的Table
• 地图使用react-leaflet

大概代码：

<Row>
 <Col flex="500px"><ProTablecolumns={columns}rowKey="id"dataSource={stops}scroll={
  { y: 400 }}pagination={false}/>
 </Col>
 <Col flex="auto"> <MapContainer {...props}> { stops.map((stop) => { return <CustomMarker key={stop.id} data={stop} />;})} </MapContainer></Col>
 </Row> 

一个简单的表格和地图渲染，简单！ 于是三下五除二功能开发完了，心中暗喜，有时间摸鱼了（跑~）。

起初，感觉数据量不大，可现实打脸的太快，server吐回的数据从几百到10万+的都有。左边表格一次性的渲染，右边地图的marker渲染是以dom方式渲染，性能开销双面叠加，可想而知，大数据量下页面的性能是多么差劲。数据量达到4千条左右时，页面数据渲染出来需要8s左右；数据量达到5万左右时，页面卡到怀疑人生甚至崩溃，几乎不可用。

于是，页面性能优化就迫在眉睫了。

定位性能瓶颈

凭直观感觉，数据量大是页面渲染的主要性能瓶颈，但是作为开发人员，还是要以客观事实为依据，不能凭感觉做事。那如何定位出页面卡顿的性能瓶颈呢？

其实前端有一些工具可以评估网站的性能，如lighthouse、chrome的devtool的Performance，下面主要是以这两个工具配合着来定位性能问题。

下面针对4000条数据的页面渲染，尝试使用lighthouse和chorme的Performance来进行性能开销定位。

lighthouse给出优化建议

首先，通过lighthouse工具给出的网站性能指标，其中的几项关键指标的定义可以参考Web 指标。如下图所示：

透过该工具，我们可以得到当前页面性能的一个大概得分，它是基于各个指标的分数按照一定的权重比例系列换算而来的，是一个综合性的评价结果，分数越低性能越差。当前页面性能的19分的计算如下图：

lighthouse每次跑的分数有波动，跟当前的网速有一定的关系；不过没有关系，最重要的看它给的优化建议。

针对当前页面，lighthouse给出的优化建议如下图所示：

因为是在本地开发环境跑的lighthouse，所以有些优化项如压缩js等不用关注，我们主要看红框标记的几项，可以说这几项是导致性能差的主要原因，需要重点关注优化。

• 减少主线程的工作主线程耗费9.4s，主要开销包括：* 14个长任务的执行* 纯js部分的执行耗时7.2s

• 避免dom数过大页面有24530个dom元素，包括表格渲染的dom，地图marker渲染的dom等；dom过多会导致页面操作卡顿，可以参考