performance-profiling

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Performance Profiling

性能分析

Measure, analyze, optimize - in that order.

按照测量、分析、优化的顺序进行。

🔧 Runtime Scripts

🔧 运行时脚本

Execute these for automated profiling:

Script	Purpose	Usage
`scripts/lighthouse_audit.py`	Lighthouse performance audit	`python scripts/lighthouse_audit.py https://example.com`

执行以下脚本以进行自动化分析：

脚本	用途	使用方法
`scripts/lighthouse_audit.py`	Lighthouse性能审计	`python scripts/lighthouse_audit.py https://example.com`

1. Core Web Vitals

1. Core Web Vitals（核心网页指标）

Targets

指标目标

Metric	Good	Poor	Measures
LCP	< 2.5s	> 4.0s	Loading
INP	< 200ms	> 500ms	Interactivity
CLS	< 0.1	> 0.25	Stability

指标	良好标准	较差标准	衡量维度
LCP	< 2.5秒	> 4.0秒	加载性能
INP	< 200毫秒	> 500毫秒	交互性能
CLS	< 0.1	> 0.25	视觉稳定性

When to Measure

测量时机

Stage	Tool
Development	Local Lighthouse
CI/CD	Lighthouse CI
Production	RUM (Real User Monitoring)

阶段	工具
开发阶段	本地Lighthouse
CI/CD阶段	Lighthouse CI
生产环境	RUM（真实用户监控）

2. Profiling Workflow

2. 分析工作流

The 4-Step Process

四步流程

1. BASELINE → Measure current state
2. IDENTIFY → Find the bottleneck
3. FIX → Make targeted change
4. VALIDATE → Confirm improvement

1. 基准测试 → 测量当前状态
2. 定位问题 → 找到性能瓶颈
3. 修复优化 → 做出针对性修改
4. 验证效果 → 确认优化提升

Profiling Tool Selection

分析工具选择

Problem	Tool
Page load	Lighthouse
Bundle size	Bundle analyzer
Runtime	DevTools Performance
Memory	DevTools Memory
Network	DevTools Network

问题场景	工具
页面加载	Lighthouse
包体积	包分析器（Bundle analyzer）
运行时性能	DevTools Performance面板
内存问题	DevTools Memory面板
网络问题	DevTools Network面板

3. Bundle Analysis

3. 包体积分析

What to Look For

关注要点

Issue	Indicator
Large dependencies	Top of bundle
Duplicate code	Multiple chunks
Unused code	Low coverage
Missing splits	Single large chunk

问题	识别指标
大型依赖	包体积排名靠前
重复代码	多个代码块重复
未使用代码	代码覆盖率低
缺少代码分割	单个大体积代码块

Optimization Actions

优化措施

Finding	Action
Big library	Import specific modules
Duplicate deps	Dedupe, update versions
Route in main	Code split
Unused exports	Tree shake

发现问题	优化动作
大型库	导入特定模块
重复依赖	去重、更新版本
路由代码在主包中	代码分割
未使用导出	摇树优化（Tree shake）

4. Runtime Profiling

4. 运行时分析

Performance Tab Analysis

Performance面板分析

Pattern	Meaning
Long tasks (>50ms)	UI blocking
Many small tasks	Possible batching opportunity
Layout/paint	Rendering bottleneck
Script	JavaScript execution

模式	含义
长任务（>50ms）	阻塞UI
大量小任务	存在批量处理的可能
布局/重绘	渲染瓶颈
脚本执行	JavaScript执行耗时

Memory Tab Analysis

Memory面板分析

Pattern	Meaning
Growing heap	Possible leak
Large retained	Check references
Detached DOM	Not cleaned up

模式	含义
堆内存持续增长	可能存在内存泄漏
大体积保留对象	检查引用关系
分离DOM节点	未被正确清理

5. Common Bottlenecks

5. 常见瓶颈

By Symptom

按症状分类

Symptom	Likely Cause
Slow initial load	Large JS, render blocking
Slow interactions	Heavy event handlers
Jank during scroll	Layout thrashing
Growing memory	Leaks, retained refs

症状	可能原因
初始加载缓慢	大型JS文件、渲染阻塞资源
交互响应缓慢	繁重的事件处理器
滚动时卡顿	布局抖动
内存持续增长	内存泄漏、未释放引用

6. Quick Win Priorities

6. 快速优化优先级

Priority	Action	Impact
1	Enable compression	High
2	Lazy load images	High
3	Code split routes	High
4	Cache static assets	Medium
5	Optimize images	Medium

优先级	优化动作	影响程度
1	启用压缩	高
2	图片懒加载	高
3	路由代码分割	高
4	静态资源缓存	中
5	图片优化	中

7. Anti-Patterns

7. 反模式

❌ Don't	✅ Do
Guess at problems	Profile first
Micro-optimize	Fix biggest issue
Optimize early	Optimize when needed
Ignore real users	Use RUM data

Remember: The fastest code is code that doesn't run. Remove before optimizing.

❌ 不要做	✅ 应该做
猜测问题	先进行分析
微优化	优先解决最大的问题
过早优化	需要时再优化
忽略真实用户数据	使用RUM数据

记住： 最快的代码是不执行的代码。优化前先考虑移除冗余代码。