性能问题的产生

• 前端承载交互逻辑增加
• 性能优化设计知识面广，对开发人员要求高
• 业务需求排期太紧，没时间优化性能
• 网络、后端服务的瓶颈

前端性能分析及优化流程

页面性能反馈收集——性能分析——实现优化——部署&验收

页面性能反馈收集

• 用户：“打开个十秒视频，等了一分半，合适吗？”
• BOSS：“为什么竞品能做到秒开”
• APM报警：Page X-LCP 10s-p50

性能分析

• Lighthouse

• 资源体积
• 文件编码、压缩效益
• 网络、缓存
• js解析、执行时间

• Webpack
• Bundle
• Analyzer
• 谷歌浏览器自带的Devtools