记一次web性能优化实战

效果展示

• 优化前
  

• 优化后
  

可以看到优化前有明显的延迟，详细信息才出现。优化后详细信息基本秒现。

问题分析

出现数据显示有明显的延时的情况，我们分析大方向可能有

• 接口缓慢
• 网络问题
• 前端问题
  • 渲染问题：渲染节点过多、重排、重绘等
  • js阻塞页面渲染

原因定位

1、查看network
最大值784ms，因此可以排除接口和网络问题

2、使用performance记录一次过程

可以看到js耗费将近14s。此处可能由于performance记录需插入很多记录钩子所以比正常范围时间耗费要放大很多。

3、查看其中一块占比较大js

可以从图中看出，主要为3个vue组件耗时较大。
在该页面中，组件耗时比较大的，大概有树形结构，级联选择框。查看一下弹窗里确实有三处地址用到级联选项。

4、级联选择框原因定位
4.1 查看了级联选择框，其根据选择中项确认子级选项列表，因此排除一次渲染全部节点造成缓慢问题
4.2 既然并不是因为渲染节点过多造成的那为啥会花费这么多时间。这得归结于vue的响应式数据了，由于我们传入的数据源是一次将整个中国省市区地址传入的，vue进行observe时是递归的，因此需对大量数据进行observe,这将花费大量时间。

解决方法

这里我并没有去改动框架的源码啥的，而是直接使用数据懒加载的方式。
及初始化的时候只传入34个省及直辖市，也就是一级数据。选中一级数据后再插入余下数据。

可以看到缩减至1.67秒，速度提高了9倍多