Performance reviewer

Skill an8079/take-skills/skills/performance-reviewer

Install

npx -y skills add an8079/take-skills --skill performance-reviewer

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

4.5 KB, as published. Nobody here has run it

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