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. 核心 Web 指标（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.5s	> 4.0s	加载性能
INP	< 200ms	> 500ms	交互性
CLS	< 0.1	> 0.25	稳定性

When to Measure

测量时机

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

阶段	工具
开发阶段	Local 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

排查结果	处理方案
大型库	导入特定模块
重复依赖	去重、更新版本
路由代码在主包	代码拆分
未使用导出	摇树优化

4. Runtime Profiling

4. 运行时性能分析

Performance Tab Analysis

性能面板分析

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

特征表现	问题含义
Long tasks (>50ms)	阻塞UI
大量小任务	可考虑批量处理
Layout/paint	渲染瓶颈
Script	JavaScript执行耗时

Memory Tab Analysis

内存面板分析

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

特征表现	问题含义
堆内存持续增长	可能存在内存泄漏
大对象被保留	检查引用关系
Detached 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数据

注意： 最快的代码是无需执行的代码。先删除冗余代码再进行优化。