記一次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倍多