performance-profiling

Performance Profiling - 性能分析与优化技能

技能概述

帮助开发者系统地分析应用性能，从测量到优化，遵循"测量→分析→优化"的科学流程，快速定位并解决性能瓶颈。

适用场景

1. 网站加载速度慢

当用户反馈网站打开慢、首屏加载时间长时，使用本技能可以帮助你通过 Lighthouse 审计、Core Web Vitals 分析等手段，快速定位是 JS 包体积过大、资源加载阻塞还是渲染性能问题。

2. 应用卡顿与内存问题

当页面出现滚动卡顿、交互响应慢或内存持续增长时，本技能提供了 Runtime Profiling 和内存分析的方法，帮助识别长任务阻塞、布局抖动以及内存泄漏等运行时问题。

3. 代码优化时机不明

开发团队不确定是否需要优化、该优化什么时，本技能强调"先测量再优化"的原则，通过建立性能基线、识别瓶颈、针对性修复、验证效果的四步流程，避免盲目优化和过度工程。

核心功能

1. Core Web Vitals 监控

提供 LCP（最大内容绘制）、INP（交互延迟）、CLS（累积布局偏移）三大核心指标的目标阈值和测量方法，支持开发阶段本地 Lighthouse 测试、CI/CD 流程自动化集成、生产环境 RUM 真实用户监控的全链路性能管理。

2. 多维度性能分析

涵盖 Bundle 包体积分析、Runtime 运行时分析、内存分析、网络分析等多个维度，针对不同类型问题推荐对应的工具：Bundle Analyzer 查看依赖体积、DevTools Performance 分析执行时序、Memory 面板排查内存泄漏。

3. 系统化优化流程

提供从基线测量到瓶颈识别、从针对性修复到效果验证的完整工作流，同时包含常见性能问题的症状-原因对照表和按优先级排序的快速优化清单，帮助开发者高效解决性能问题。

常见问题

性能分析应该从哪个步骤开始？

必须从"建立基线"开始。不要凭感觉猜测问题，先用 Lighthouse 或相关工具测量当前状态，获取量化数据作为后续优化的对比基准。没有基线的优化无法验证效果。

Core Web Vitals 的合格标准是什么？

LCP（加载性能）应小于 2.5 秒，INP（交互性）应小于 200 毫秒，CLS（视觉稳定性）应小于 0.1。超过这些阈值就表示对应方面存在体验问题，需要优先处理。

如何判断是否存在内存泄漏？

使用 DevTools Memory 面板进行堆快照分析，观察是否存在持续增长的堆内存、大量保留对象或分离的 DOM 节点。如果多次操作后内存无法回收，且存在未清理的引用，就很可能存在内存泄漏。