性能问题的产生
- 前端承载交互逻辑增加
- 性能优化设计知识面广，对开发人员要求高
- 业务需求排期太紧，没时间优化性能
- 网络、后端服务的瓶颈
前端性能分析及优化流程
页面性能反馈收集——性能分析——实现优化——部署&验收
页面性能反馈收集
- 用户：“打开个十秒视频，等了一分半，合适吗？”
- BOSS：“为什么竞品能做到秒开”
- APM报警：Page X-LCP 10s-p50
性能分析
- Lighthouse
- 资源体积
- 文件编码、压缩效益
- 网络、缓存
- js解析、执行时间
- Webpack
- Bundle
- Analyzer
- 谷歌浏览器自带的Devtools
