# Frontend Perf

> 前端性能分析技能。分析前端页面的加载性能、渲染性能和资源体积问题，输出性能分析报告和优化建议。适用于前端工程师处理页面加载慢、交互卡顿等性能问题。

- Skill: `rowankid/frontend-perf` (Agent Skill)
- Install (CLI): `npx skillmds@latest add rowankid/frontend-perf`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rowankid/frontend-perf/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: rowankid (https://skillmd.com/u/rowankid)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/rowankid/frontend-perf

---


# Frontend Perf Skill — 前端性能分析技能

## 分析维度

### 加载性能
- 首屏时间（FCP）目标：< 1.5s
- 最大内容绘制（LCP）目标：< 2.5s
- JS Bundle 体积：单个文件 < 500KB

### 渲染性能
- 是否有不必要的重渲染？
- 长列表是否使用虚拟滚动？
- 动画是否使用 CSS transform 而非 left/top？

### 资源优化
- 图片是否已压缩？格式是否合理（WebP 优先）？
- 是否启用了代码分割（Code Splitting）？
- 是否有未使用的依赖包？

## 优化建议清单

| 问题 | 优先级 | 优化方案 | 预期收益 |
|------|--------|---------|---------|

## 输出格式

```markdown
# 前端性能分析报告 — [页面/功能名]

日期: | 分析人:

## 当前性能指标
| 指标 | 当前值 | 目标值 | 状态 |
|------|--------|--------|------|

## 问题清单（按优先级）

## 优化方案

## 优化后预期效果
```