效果展示
-
优化前
-
优化后
可以看到优化前有明显的延迟,详细信息才出现。优化后详细信息基本秒现。
问题分析
出现数据显示有明显的延时的情况,我们分析大方向可能有
- 接口缓慢
- 网络问题
- 前端问题
- 渲染问题:渲染节点过多、重排、重绘等
- js阻塞页面渲染
原因定位
1、查看network
最大值784ms,因此可以排除接口和网络问题
2、使用performance记录一次过程
可以看到js耗费将近14s。此处可能由于performance记录需插入很多记录钩子所以比正常范围时间耗费要放大很多。
3、查看其中一块占比较大js
可以从图中看出,主要为3个vue组件耗时较大。
在该页面中,组件耗时比较大的,大概有树形结构,级联选择框。查看一下弹窗里确实有三处地址用到级联选项。
4、级联选择框原因定位
4.1 查看了级联选择框,其根据选择中项确认子级选项列表,因此排除一次渲染全部节点造成缓慢问题
4.2 既然并不是因为渲染节点过多造成的那为啥会花费这么多时间。这得归结于vue的响应式数据了,由于我们传入的数据源是一次将整个中国省市区地址传入的,iview的级联会根据数据生成递归render节点只是未选中父级时不渲染显示dom,因此需进行大量diff操作,这将花费大量时间。
解决方法
这里我并没有去改动框架的源码啥的,而是直接使用数据懒加载的方式。
及初始化的时候只传入34个省及直辖市,也就是一级数据。选中一级数据后再插入余下数据。
可以看到缩减至1.67秒,速度提高了9倍多