性能問題的產生

• 前端承載交互邏輯增加
• 性能優化設計知識面廣，對開發人員要求高
• 業務需求排期太緊，沒時間優化性能
• 網絡、后端服務的瓶頸

前端性能分析及優化流程

頁面性(xing)能反饋收集(ji)——性(xing)能分析——實現優化——部署&驗(yan)收

頁面性能反饋收集

• 用戶：“打開個十秒視頻，等了一分半，合適嗎？”
• BOSS：“為什么競品能做到秒開”
• APM報警：Page X-LCP 10s-p50

性能分析

• Lighthouse

• 資源體積
• 文件編碼、壓縮效益
• 網絡、緩存
• js解析、執行時間

• Webpack
• Bundle
• Analyzer
• 谷歌瀏覽器自帶的Devtools