用途:该技能围绕“先测量、再分析、最后优化”的顺序,提供 Web 性能分析的原则与工作流,帮助定位并修复性能瓶颈。
主要能力:
- Core Web Vitals 指标参考:LCP 良好 < 2.5s、较差 > 4.0s(加载);INP 良好 < 200ms、较差 > 500ms(交互);CLS 良好 < 0.1、较差 > 0.25(稳定性)。测量时机:开发阶段用本地 Lighthouse,CI/CD 用 Lighthouse CI,生产环境用 RUM(真实用户监控)。
- 四步分析流程:BASELINE(测量现状)→ IDENTIFY(找瓶颈)→ FIX(针对性修改)→ VALIDATE(确认改进)。
- 工具选择:页面加载用 Lighthouse,包体积用 Bundle analyzer,运行时用 DevTools Performance,内存用 DevTools Memory,网络用 DevTools Network。
- 打包分析:关注大依赖、重复代码、未使用代码、缺少拆分;对应动作包括按需导入具体模块、去重与升级版本、路由代码分割、tree shake。
- 运行时与内存分析:识别长任务(>50ms,UI 阻塞)、大量小任务、布局/绘制瓶颈、脚本执行;内存方面关注堆增长(可能泄漏)、大对象保留、未清理的游离 DOM。
- 常见瓶颈与快速优化优先级:慢首屏(大 JS、渲染阻塞)、慢交互(重事件处理)、滚动卡顿(布局抖动)、内存增长(泄漏);优先启用压缩、图片懒加载、路由代码分割,其次缓存静态资源、优化图片。
使用方式:可运行脚本 scripts/lighthouse_audit.py 进行 Lighthouse 性能审计,用法为 python scripts/lighthouse_audit.py https://example.com。
限制与原则:避免猜测问题、过早优化、微优化和忽略真实用户数据;应先分析再优化,优先解决最大问题,并记住“最快的代码是不运行的代码”,先移除再优化。其他细节暂未提供。