AI 教你排查网页慢与内存泄漏
解决前端性能难题：学会通过基准测试、工具选型与流程梳理，快速定位页面加载慢、交互卡顿、内存泄漏等核心问题并优化。
为什么需要这个技能
Measure, analyze, optimize - in that order.
很多开发者只关注功能实现，却忽略了实际运行效率。如果网页加载过慢、输入响应延迟或内存持续增长，用户体验将大打折扣。 本技能教你遵循"先测量、再分析、后优化"的原则，利用 Lighthouse、DevTools 等工具定位瓶颈，避免盲目猜测导致无效优化。
适用场景
- 发现页面首屏加载超过 3 秒，怀疑资源过大或渲染阻塞时。
- 应用运行一段时间后内存占用暴涨，怀疑存在泄漏时。
- CI/CD 流水线中需要自动化检测性能基线变化时。
- 用户反馈滚动卡顿、点击无响应，需要排查长任务时。
核心工作流
- 建立基准 (Baseline)： 使用本地或远程工具记录当前性能状态，确定核心指标基线。
- 识别瓶颈 (Identify)： 根据症状（如加载慢、交互慢、抖动）选择对应工具进行深入分析。
- 执行修复 (Fix)： 针对具体问题采取优化动作，如代码分割、懒加载、去重依赖等。
- 验证结果 (Validate)： 再次运行测试，确认指标是否回落到"Good"范围。
工具与指标对照
| 问题类型 | 推荐工具 | 关键指标 |
|---|---|---|
| 页面加载 | Lighthouse | LCP < 2.5s |
| 交互响应 | DevTools | INP < 200ms |
| 布局跳动 | Lighthouse | CLS < 0.1 |
| 内存泄漏 | DevTools | Heap 稳定增长 |
常用命令示例
针对自动化审计，可直接执行以下脚本：
python scripts/lighthouse_audit.py https://example.com常见瓶颈与对策
- 加载慢：检查是否引入了过大的 JS 库或渲染阻塞资源。对策：启用压缩、懒加载图片。
- 交互卡顿：排查是否有长任务（>50ms）阻塞主线程。对策：批处理任务、任务分片。
- 内存上涨：查看 Retained Heap 是否有孤立对象。对策：及时清理 Detached DOM。
- 代码冗余：检查 Bundle 中是否有重复代码或未使用的导出。对策：Code Splitting 和 Tree Shaking。
避坑指南
- ❌ 盲目优化：在没数据支持的情况下微调代码。
- ✅ 先测后改：始终依赖 Profile 数据而非直觉。
- ❌ 只关注开发者体验：忽略真实用户数据 (RUM)。
- ✅ 聚焦最大瓶颈：解决掉对速度影响最大的那一个点。
下载和安装
下载 performance-profiling 中文版 Skill ZIP
解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。
你可能还需要
暂无推荐