问题
环境
- 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），此处也是有待进一步优化之处。
网友评论