performance-profiling

@vodailocz · 收录于今天 · 上游提交 1 周前

Performance profiling principles. Measurement, analysis, and optimization techniques.

场景性能调优代码优化

适合你，如果正在排查程序慢的原因，需要系统性的性能分析方法

/ 下载安装

https://github.com/vodailocz/kilo-kit-mcp/tree/main/skills/engineering/performance-profiling ↗

/ 通过 npx 安装 校验哈希

npx oh-my-skill add vodailocz/kilo-kit-mcp/performance-profiling

/ 通过 bash 安装

curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- vodailocz/kilo-kit-mcp/performance-profiling

/ 已经装过?验证本机副本,不用重装

npx oh-my-skill verify vodailocz/kilo-kit-mcp/performance-profiling

安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。

26GitHub stars

~634最小装载

~1.1K含声明引用

~1.1K文本包总量

索引托管

怎么用

技能原文 SKILL.md作者撰写 · Apache-2.0 · c5e4d76

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 |

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 |

When to Measure

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

2. Profiling Workflow

The 4-Step Process

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

Profiling Tool Selection

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

3. Bundle Analysis

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

Performance Tab Analysis

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

Memory Tab Analysis

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

5. Common Bottlenecks

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 |

6. Quick Win Priorities

| 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 |

7. Anti-Patterns

| ❌ 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.

按 Apache-2.0 许可原样转载,未经改动 · 在 GitHub 查看 →

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。

…