Skill

performance-reviewer

> 性能专项审查技能 — 前端/后端性能问题识别、量化分析、优化建议

Install

npx claudepluginhub an8079/take-skills

Tool Access

This skill uses the workspace's default tool permissions.

Preview

> 性能专项审查技能 — 前端/后端性能问题识别、量化分析、优化建议

SKILL.md

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

139.2k

mcp-builder

9 files

Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).

anthropics-skills-13

124.2k

canvas-design

20 files

Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.

anthropics-skills-13

124.2k

Stats

Stars4

Forks1

Last CommitMar 29, 2026

Actions

View Source View Plugin View on GitHub View README

performance-reviewer

性能专项审查技能 — 前端/后端性能问题识别、量化分析、优化建议

触发词

perf, performance, 性能审查, 慢, 优化, performance-review

概述

作为 performance-reviewer，专注于识别和量化性能问题。涵盖前端渲染性能、后端 API 响应、数据库查询、内存使用、网络请求等维度。

核心审查维度

1. 前端性能

渲染性能

首屏加载时间（LCP < 2.5s）
首次内容绘制（FCP < 1.8s）
交互准备时间（TTI < 3.8s）
累计布局偏移（CLS < 0.1）
阻塞时间（TBT < 200ms）

运行时性能

React/Vue 组件重渲染分析
虚拟滚动实现检查（大列表）
防抖/节流正确使用
动画性能（使用 transform/opacity）
内存泄漏检测（未清理的定时器/订阅）

资源优化

图片优化（格式、WebP、懒加载）
字体优化（字体子集、display:swap）
CSS/JS 打包优化（code splitting）
CDN 使用检查
缓存策略（强缓存/协商缓存）

2. 后端性能

API 响应时间

P50/P95/P99 延迟
超时配置合理性
并发处理能力

数据库性能

索引使用情况
N+1 查询问题
全表扫描检测
慢查询识别（>100ms）
查询复杂度分析

缓存策略

Redis/Memcached 命中率
缓存穿透/击穿/雪崩风险
缓存一致性

3. 网络性能

请求优化

请求合并
请求取消（AbortableFetch）
预加载/预连接
HTTP/2 或 HTTP/3 使用

资源大小

响应体大小（gzip 后 < 500KB）
大文件 CDN 化
图片压缩质量

性能审查检查清单

[ ] Core Web Vitals
    - [ ] LCP < 2.5s
    - [ ] FCP < 1.8s
    - [ ] TTI < 3.8s
    - [ ] CLS < 0.1
    - [ ] TBT < 200ms

[ ] 前端优化
    - [ ] 图片使用正确格式（WebP/AVIF）
    - [ ] 图片有懒加载
    - [ ] 字体子集化 + display:swap
    - [ ] JS/CSS code splitting
    - [ ] 无大型内联脚本
    - [ ] 第三方脚本异步加载

[ ] React/Vue 性能
    - [ ] 大列表使用虚拟滚动
    - [ ] useMemo/useCallback 合理使用
    - [ ] Context 避免频繁更新
    - [ ] 无内存泄漏（定时器/订阅清理）

[ ] 后端性能
    - [ ] 数据库有适当索引
    - [ ] 无 N+1 查询
    - [ ] 慢查询 < 100ms
    - [ ] 缓存命中率 > 80%（热点数据）
    - [ ] API 有超时限制

[ ] 网络优化
    - [ ] 静态资源使用 CDN
    - [ ] 开启 gzip/brotli
    - [ ] 有 HTTP/2 或 HTTP/3
    - [ ] 预连接关键域名

执行流程

Step 1: 性能测量

前端性能测量

# Lighthouse CLI
npx lighthouse <url> --output=json --output-path=report.json

# WebPageTest（严重情况下）
# Chrome DevTools Protocol

后端性能测量

# 慢查询日志分析
# APM 工具（New Relic/Datadog/Sentry）
# 数据库 EXPLAIN 分析

Step 2: 代码分析

读取关键文件（路由、组件、数据库查询）
识别明显性能问题
分析算法复杂度

Step 3: 量化优先级

按性能影响排序：

P0: 阻塞首屏（用户直接看到）
P1: 影响核心功能（显著卡顿）
P2: 体验优化（轻微延迟）
P3: 未来优化（可以接受）

Step 4: 输出报告

## 性能审查报告

### 关键指标
| 指标 | 当前值 | 目标值 | 状态 |
|------|--------|--------|------|
| LCP | 4.2s | <2.5s | 🔴 |
| FCP | 2.1s | <1.8s | 🟡 |
| TTI | 5.8s | <3.8s | 🔴 |

### Top 性能问题
| 优先级 | 问题 | 影响 | 修复方案 |
|--------|------|------|----------|
| P0 | 图片无懒加载 | +1.8s LCP | 添加 loading="lazy" |
| P1 | N+1 查询 | 500ms+ | 使用 JOIN 或批量查询 |

量化标准

指标	优秀	合格	需优化
LCP	<1.5s	<2.5s	>2.5s
FCP	<1.0s	<1.8s	>1.8s
TTI	<2.5s	<3.8s	>3.8s
CLS	<0.05	<0.1	>0.1
API P99	<100ms	<300ms	>300ms
DB Query	<10ms	<100ms	>100ms

优化建议原则

先量化，后优化 — 每个问题有具体数据
ROI 导向 — 高影响低成本优先
避免过度优化 — 不要为了 5ms 投入 2 小时
缓存优先 — 能用缓存解决的问题最简单

工具推荐

前端:

Lighthouse / PageSpeed Insights
Web Vitals Chrome Extension
React DevTools Profiler
Vue DevTools

后端:

PostgreSQL: EXPLAIN ANALYZE
MongoDB: .explain()
Redis: MONITOR 命令
APM: Sentry, Datadog, New Relic