优化列表数据显示卡顿

问题

环境

• vue : 2.6.10
• element-ui : 2.13.0
• koa : 2.7.0

描述

列表数据大概300条左右，请求一次性请求所有数据，在操作之后到页面上显示表格数据大概有3秒卡顿，想到用chrome performance面板进行分析。
对performance运用比较陌生，看了两篇performance调试文章，链接贴出来
前端性能测试
全新Chrome Devtool Performance使用指南

结果如下：

原网页性能分析

可以看到，从界面上点击显示列表数据到界面上有数据显示出来的总耗时为：

总耗时

其中优化主要点在于：

• js脚本执行时间过长（1197ms）
• 界面渲染时间过长（682ms）
  空闲时间（313ms）相较于这两者来说不算太长，可以先暂时不用考虑优化

针对以上两点进行分析，js脚本执行时间太长可能是因为数据量大导致（只是猜测，从performance面板进不到js文件里），界面渲染时间过长是因为需要一次性渲染近300条数据，dom操作频繁导致。

由此想到将数据分片进行展示，原代码获取列表数据只发了一次请求获取全部数据，可以考虑首先获取少量数据进行渲染，填充当前界面显示区域，再获取全部数据（此处也可获取较多条数的数据，譬如1000条，缓存到前端，等到缓存区数据不够是再请求获取多条数据，由于数据量不够大，故此处直接获取全部数据）。

验证

为验证以上方法，首先请求20条数据（分页设定每页显示20条数据），用performance对从操作到数据显示的结果为：

只发一条请求，请求少量数据

总耗时：

总耗时

可以看到，当请求数据量少时，卡顿时间明显减少，js脚本执行时间与render渲染时间明显下降。

在此之后再请求所有数据，前端进行数据缓存，分页后每翻一页从缓存里取数据渲染界面，发两次请求从操作到数据显示结果为：

两次请求

总耗时：

总耗时

相较于只发一次请求耗时略有增加，主要体现在js脚本执行时间与空闲时间的增减，但相较于原网页请求耗时仍有明显减少。

总结

其实以前做的请求多条数据都是用这种方式实现的，发两次请求，一次用于显示，一次用于缓存数据，只是一直没从性能的角度进行分析，对performance面板的运用也不太熟，之后需要进行学习。

但本次的优化之后虽然卡顿时间确有下降，但是可以从上面总耗时图中看到，空闲时间仍有很多（265ms），此处也是有待进一步优化之处。