Back to Details

performance

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Performance

性能

This skill provides comprehensive performance capabilities including performance analysis, optimization, load testing, stress testing, capacity planning, and framework-specific performance patterns.
本技能提供全方位性能能力，包括性能分析、优化、负载测试、压力测试、容量规划及特定框架性能模式。

When to Use This Skill

适用场景

  • When identifying performance bottlenecks
  • When investigating memory leaks or high memory usage
  • When optimizing slow database queries
  • When analyzing frontend performance (Core Web Vitals, bundle size)
  • When setting up performance monitoring
  • When conducting performance audits before deployment
  • When creating load test scenarios
  • When analyzing performance under stress
  • When identifying system bottlenecks under load
  • When planning capacity
  • When setting up performance benchmarks
  • When optimizing React rendering performance
  • When reducing bundle size
  • When improving Core Web Vitals (LCP, FID, CLS)
  • When fixing memory leaks in React apps
  • When implementing advanced React patterns
  • 识别性能瓶颈时
  • 排查内存泄漏或内存占用过高问题时
  • 优化缓慢的数据库查询时
  • 分析前端性能（Core Web Vitals、包体积）时
  • 搭建性能监控体系时
  • 部署前开展性能审计时
  • 创建负载测试场景时
  • 分析压力下的系统性能时
  • 识别负载下的系统瓶颈时
  • 进行容量规划时
  • 设定性能基准时
  • 优化React渲染性能时
  • 减小包体积时
  • 提升Core Web Vitals（LCP、FID、CLS）时
  • 修复React应用中的内存泄漏时
  • 实现高级React模式时

What This Skill Does

技能能力

  1. Performance Profiling: Analyzes CPU, memory, and network performance
  2. Bottleneck Identification: Pinpoints specific performance issues
  3. Memory Analysis: Detects memory leaks and high memory usage
  4. Database Optimization: Identifies slow queries and optimization opportunities
  5. Frontend Analysis: Analyzes bundle size, rendering performance, Core Web Vitals
  6. Load Testing: Creates and executes load test scenarios
  7. Stress Testing: Identifies breaking points and limits
  8. Capacity Planning: Analyzes scalability and capacity
  9. React Optimization: Optimizes React rendering, bundle size, and Core Web Vitals
  10. Monitoring Setup: Creates performance monitoring and alerting
  1. 性能分析：分析CPU、内存及网络性能
  2. 瓶颈定位：精准定位具体性能问题
  3. 内存分析：检测内存泄漏及内存占用过高问题
  4. 数据库优化：识别慢查询及优化机会
  5. 前端分析：分析包体积、渲染性能及Core Web Vitals
  6. 负载测试：创建并执行负载测试场景
  7. 压力测试：识别系统崩溃点及极限
  8. 容量规划：分析系统可扩展性及容量
  9. React优化：优化React渲染、包体积及Core Web Vitals
  10. 监控搭建：创建性能监控及告警机制

How to Use

使用方法

Analyze Performance

分析性能

Analyze the performance of this application and identify bottlenecks
Profile the memory usage and find any leaks
Analyze the performance of this application and identify bottlenecks
Profile the memory usage and find any leaks

Create Load Tests

创建负载测试

Create load test scenarios for this API
Test performance under 1000 concurrent users
Create load test scenarios for this API
Test performance under 1000 concurrent users

Optimize React Apps

优化React应用

Optimize this React app for better performance
Analyze bundle size and reduce it
Optimize this React app for better performance
Analyze bundle size and reduce it

Analysis Areas

分析领域

Application Performance

应用性能

Metrics to Track:
  • Response times and latency
  • Throughput (requests per second)
  • Error rates
  • CPU utilization
  • Memory usage patterns
Common Issues:
  • Slow API endpoints
  • High CPU usage
  • Memory leaks
  • Inefficient algorithms
  • Blocking operations
需跟踪指标：
  • 响应时间与延迟
  • 吞吐量（每秒请求数）
  • 错误率
  • CPU使用率
  • 内存使用模式
常见问题：
  • 缓慢的API端点
  • CPU使用率过高
  • 内存泄漏
  • 低效算法
  • 阻塞操作

Database Performance

数据库性能

Analysis Focus:
  • Slow query identification
  • Missing indexes
  • N+1 query problems
  • Connection pool exhaustion
  • Lock contention
Tools:
  • Query execution plans (EXPLAIN ANALYZE)
  • Slow query logs
  • Database monitoring tools
  • Connection pool metrics
分析重点：
  • 慢查询识别
  • 缺失索引
  • N+1查询问题
  • 连接池耗尽
  • 锁竞争
工具：
  • 查询执行计划（EXPLAIN ANALYZE）
  • 慢查询日志
  • 数据库监控工具
  • 连接池指标

Frontend Performance

前端性能

Core Web Vitals:
  • Largest Contentful Paint (LCP) < 2.5s
  • First Input Delay (FID) < 100ms
  • Cumulative Layout Shift (CLS) < 0.1
Bundle Analysis:
  • Bundle size optimization
  • Code splitting opportunities
  • Unused code removal
  • Asset optimization
Core Web Vitals：
  • Largest Contentful Paint (LCP) < 2.5秒
  • First Input Delay (FID) < 100毫秒
  • Cumulative Layout Shift (CLS) < 0.1
包体积分析：
  • 包体积优化
  • 代码拆分机会
  • 移除未使用代码
  • 资源优化

React Performance

React性能

Rendering Optimization:
  • React.memo for component memoization
  • useMemo for expensive computations
  • useCallback for function memoization
  • Virtualization for long lists
  • Code splitting and lazy loading
Bundle Optimization:
  • Code splitting by route
  • Component lazy loading
  • Tree shaking unused code
  • Dynamic imports
  • Bundle analysis
渲染优化：
  • 使用React.memo进行组件记忆化
  • 使用useMemo处理昂贵计算
  • 使用useCallback进行函数记忆化
  • 长列表虚拟化
  • 代码拆分与懒加载
包体积优化：
  • 按路由拆分代码
  • 组件懒加载
  • Tree Shaking移除未使用代码
  • 动态导入
  • 包体积分析

Performance Testing

性能测试

Load Testing

负载测试

Purpose: Test system under expected load Metrics: Response time, throughput, error rate Tools: k6, Artillery, JMeter, Locust
Example (k6):
javascript
import http from 'k6/http';
import { check } from 'k6';

export const options = {
  stages: [
    { duration: '2m', target: 100 }, // Ramp up
    { duration: '5m', target: 100 }, // Stay at 100
    { duration: '2m', target: 200 }, // Ramp up to 200
    { duration: '5m', target: 200 }, // Stay at 200
    { duration: '2m', target: 0 },   // Ramp down
  ],
};

export default function() {
  const res = http.get('https://api.example.com/users');
  check(res, {
    'status is 200': (r) => r.status === 200,
    'response time < 500ms': (r) => r.timings.duration < 500,
  });
}
目的：测试系统在预期负载下的表现 指标：响应时间、吞吐量、错误率 工具：k6, Artillery, JMeter, Locust
示例（k6）：
javascript
import http from 'k6/http';
import { check } from 'k6';

export const options = {
  stages: [
    { duration: '2m', target: 100 }, // 逐步加压
    { duration: '5m', target: 100 }, // 维持100并发
    { duration: '2m', target: 200 }, // 逐步加压至200
    { duration: '5m', target: 200 }, // 维持200并发
    { duration: '2m', target: 0 },   // 逐步减压
  ],
};

export default function() {
  const res = http.get('https://api.example.com/users');
  check(res, {
    'status is 200': (r) => r.status === 200,
    'response time < 500ms': (r) => r.timings.duration < 500,
  });
}

Stress Testing

压力测试

Purpose: Find breaking points Metrics: Maximum capacity, failure points Approach: Gradually increase load until failure
目的：找出系统崩溃点 指标：最大容量、故障点 方法：逐步增加负载直至系统故障

Capacity Planning

容量规划

Purpose: Determine resource needs Metrics: Resource utilization, scaling requirements Analysis: Current capacity vs. future needs
目的：确定资源需求 指标：资源使用率、扩容需求 分析：当前容量与未来需求对比

Analysis Process

分析流程

1. Establish Baseline

1. 建立基准

Measure Current Performance:
  • Response time percentiles (p50, p90, p95, p99)
  • Throughput metrics
  • Error rates
  • Resource utilization (CPU, memory, network)
Set Targets:
  • Define acceptable performance thresholds
  • Set SLA targets
  • Identify critical paths
测量当前性能：
  • 响应时间百分位数（p50、p90、p95、p99）
  • 吞吐量指标
  • 错误率
  • 资源使用率（CPU、内存、网络）
设定目标：
  • 定义可接受的性能阈值
  • 设置SLA目标
  • 识别关键路径

2. Identify Bottlenecks

2. 定位瓶颈

Profiling Techniques:
  • CPU profiling to find hot functions
  • Memory profiling to find leaks
  • Network analysis for API calls
  • Database query analysis
Bottleneck Patterns:
  • Single slow operation (algorithmic complexity)
  • Many small operations (N+1 queries)
  • Resource contention (locks, connection pools)
  • Memory leaks (gradual growth)
分析技术：
  • CPU分析找出热点函数
  • 内存分析找出泄漏点
  • API调用网络分析
  • 数据库查询分析
瓶颈模式：
  • 单个慢操作（算法复杂度问题）
  • 大量小操作（N+1查询）
  • 资源竞争（锁、连接池）
  • 内存泄漏（内存逐步增长）

3. Analyze Root Cause

3. 分析根本原因

Investigation Steps:
  1. Identify the slow operation
  2. Measure its performance
  3. Analyze why it's slow
  4. Check for optimization opportunities
  5. Verify the fix improves performance
排查步骤：
  1. 识别慢操作
  2. 测量其性能
  3. 分析慢操作原因
  4. 寻找优化机会
  5. 验证修复是否提升性能

4. Provide Optimization Recommendations

4. 提供优化建议

Recommendations Should Include:
  • Specific code changes
  • Before/after performance metrics
  • Implementation steps
  • Expected impact
  • Risk assessment
建议应包含：
  • 具体代码变更
  • 优化前后性能指标对比
  • 实施步骤
  • 预期影响
  • 风险评估

Examples

示例

Example 1: API Performance Analysis

示例1：API性能分析

Input: API endpoint 
/api/users
is slow
Output:
markdown
undefined
输入：API端点
/api/users
响应缓慢
输出：
markdown
undefined

Performance Analysis: /api/users

性能分析：/api/users

Current Performance

当前性能

  • Average Response Time: 2.3s
  • P95 Response Time: 4.1s
  • Throughput: 45 req/s
  • Error Rate: 2%
  • 平均响应时间：2.3秒
  • P95响应时间：4.1秒
  • 吞吐量：45请求/秒
  • 错误率：2%

Bottleneck Identified

定位到的瓶颈

Issue: N+1 query problem in user data fetching
  • Location: 
    src/routes/users.js:34
  • Pattern: One query for users, then N queries for each user's posts
问题：用户数据获取存在N+1查询问题
  • 位置：
    src/routes/users.js:34
  • 模式：先查询用户列表，再为每个用户单独查询帖子（共N+1次查询）

Root Cause

根本原因

javascript
// Current implementation
const users = await db.users.findAll();
for (const user of users) {
  user.posts = await db.posts.findByUserId(user.id); // N+1 queries
}
javascript
// 当前实现
const users = await db.users.findAll();
for (const user of users) {
  user.posts = await db.posts.findByUserId(user.id); // N+1查询
}

Optimization

优化方案

javascript
// Optimized with eager loading
const users = await db.users.findAll({
  include: [{ model: Post, as: 'posts' }] // Single query with JOIN
});
javascript
// 使用预加载优化
const users = await db.users.findAll({
  include: [{ model: Post, as: 'posts' }] // 单次JOIN查询
});

Expected Impact

预期影响

  • Response Time: 2.3s → 0.3s (87% improvement)
  • Database Queries: 101 → 1 (99% reduction)
  • Throughput: 45 → 200+ req/s
undefined
  • 响应时间：2.3秒 → 0.3秒（提升87%）
  • 数据库查询次数：101次 → 1次（减少99%）
  • 吞吐量：45 → 200+请求/秒
undefined

Example 2: React Component Optimization

示例2：React组件优化

Input: Optimize expensive component
Output:
markdown
undefined
输入：优化性能开销大的组件
输出：
markdown
undefined

React Performance: Component Optimization

React性能：组件优化

Issue

问题

Component re-renders on every parent update, even when props haven't changed.
父组件更新时，该组件会不必要地重新渲染，即使props未发生变化。

Optimization

优化方案

javascript
// Before: Re-renders unnecessarily
function ExpensiveComponent({ data, config }) {
  const processed = data
    .filter(item => item.active)
    .map(item => processComplex(item, config));

  return <Chart data={processed} />;
}

// After: Memoized to prevent unnecessary re-renders
const ExpensiveComponent = React.memo(({ data, config }) => {
  const processed = useMemo(() => {
    return data
      .filter(item => item.active)
      .map(item => processComplex(item, config));
  }, [data, config]);

  return <Chart data={processed} />;
});
javascript
// 优化前：不必要地重新渲染
function ExpensiveComponent({ data, config }) {
  const processed = data
    .filter(item => item.active)
    .map(item => processComplex(item, config));

  return <Chart data={processed} />;
}

// 优化后：通过记忆化避免不必要的重新渲染
const ExpensiveComponent = React.memo(({ data, config }) => {
  const processed = useMemo(() => {
    return data
      .filter(item => item.active)
      .map(item => processComplex(item, config));
  }, [data, config]);

  return <Chart data={processed} />;
});

Impact

影响

  • Re-renders reduced: 100% → 5%
  • Performance improvement: 80% faster
undefined
  • 重新渲染次数占比：100% → 5%
  • 性能提升：速度提升80%
undefined

Reference Files

参考文件

For framework-specific performance patterns and detailed guidance, load reference files as needed:
  • references/framework_patterns.md
     - Performance patterns for Node.js, React, databases, APIs, frontend, and monitoring strategies (from performance-analysis)
  • references/react_patterns.md
     - React-specific performance optimization patterns, memoization strategies, bundle optimization, and Core Web Vitals improvements
  • references/load_testing.md
     - Load testing and stress testing patterns, tools, scenarios, and capacity planning strategies
  • references/PERFORMANCE_ANALYSIS.template.md
     - Performance analysis report template with load profiles, bottlenecks, and recommendations
When analyzing performance for specific frameworks or conducting load tests, load the appropriate reference file.
如需特定框架性能模式及详细指导，可按需加载以下参考文件：
  • references/framework_patterns.md
     - 适用于Node.js、React、数据库、API、前端的性能模式及监控策略（来自性能分析模块）
  • references/react_patterns.md
     - React专属性能优化模式、记忆化策略、包体积优化及Core Web Vitals提升方法
  • references/load_testing.md
     - 负载测试与压力测试模式、工具、场景及容量规划策略
  • references/PERFORMANCE_ANALYSIS.template.md
     - 性能分析报告模板，包含负载配置、瓶颈及建议
分析特定框架性能或开展负载测试时，请加载对应参考文件。

Best Practices

最佳实践

Performance Analysis Approach

性能分析方法

  1. Measure First: Always establish baseline metrics
  2. Profile Before Optimizing: Identify actual bottlenecks
  3. Optimize Incrementally: Make one change at a time
  4. Verify Improvements: Measure after each optimization
  5. Monitor Continuously: Set up ongoing performance monitoring
  1. 先测量：始终先建立性能基准指标
  2. 先分析再优化：识别真实瓶颈
  3. 增量优化：每次仅做一处变更
  4. 验证提升效果：每次优化后重新测量
  5. 持续监控：搭建实时性能监控体系

Common Optimizations

常见优化手段

Application:
  • Optimize algorithms (reduce complexity)
  • Add caching layers
  • Use connection pooling
  • Implement request batching
  • Add rate limiting
Database:
  • Add appropriate indexes
  • Optimize queries (avoid N+1)
  • Use query result caching
  • Implement read replicas
  • Optimize connection pooling
Frontend:
  • Code splitting and lazy loading
  • Image optimization
  • Bundle size reduction
  • Minimize re-renders
  • Optimize asset loading
React:
  • Measure before optimizing
  • Memoize strategically (don't over-memoize)
  • Code split by route and feature
  • Lazy load components on demand
  • Monitor performance metrics
应用层：
  • 优化算法（降低复杂度）
  • 添加缓存层
  • 使用连接池
  • 实现请求批量处理
  • 添加限流机制
数据库层：
  • 添加合适的索引
  • 优化查询（避免N+1问题）
  • 使用查询结果缓存
  • 实现只读副本
  • 优化连接池配置
前端：
  • 代码拆分与懒加载
  • 图片优化
  • 减小包体积
  • 最小化重新渲染
  • 优化资源加载
React：
  • 优化前先测量
  • 策略性使用记忆化（避免过度记忆化）
  • 按路由及功能拆分代码
  • 按需懒加载组件
  • 监控性能指标

Monitoring Setup

监控搭建

Key Metrics:
  • Response time percentiles
  • Error rates
  • Throughput
  • Resource utilization
  • Custom business metrics
Alerting:
  • Alert on performance degradation
  • Alert on error rate spikes
  • Alert on resource exhaustion
  • Alert on SLA violations
关键指标：
  • 响应时间百分位数
  • 错误率
  • 吞吐量
  • 资源使用率
  • 自定义业务指标
告警设置：
  • 性能下降告警
  • 错误率突升高告警
  • 资源耗尽告警
  • SLA违规告警

Related Use Cases

相关使用场景

  • Performance audits
  • Optimization projects
  • Capacity planning
  • Performance regression detection
  • Production performance monitoring
  • Load testing analysis
  • React app optimization
  • Bundle size reduction
  • Core Web Vitals improvement
  • Memory leak fixes
  • Rendering performance optimization
  • 性能审计
  • 优化项目
  • 容量规划
  • 性能回归检测
  • 生产环境性能监控
  • 负载测试分析
  • React应用优化
  • 包体积减小
  • Core Web Vitals提升
  • 内存泄漏修复
  • 渲染性能优化