---

name: perf description: 审计组件性能并识别优化机会，提供可操作的修复方案 argument-hint: [组件名称] allowed-tools: Read, Grep, Glob, Bash(git diff*)

性能审计技能

审计Terrae组件的性能问题。识别问题，解释其影响，并提供可操作的修复方案。

如果提供了$ARGUMENTS，则仅审计该组件。否则，审计src/registry/map/中的所有组件。

性能模式和最佳实践定义在.claude/rules/react/performance.md中。

指令

步骤1：识别目标

如果提供了组件名称，请在src/registry/map/中定位它。否则，扫描所有组件文件。

步骤2：运行审计

对于每个组件，读取完整文件并检查.claude/rules/react/performance.md中的每条规则：

1. 资源清理（RAF、定时器、监听器、标记、图层、数据源、图像、观察器、画布）
2. 递归的requestAnimationFrame轮询
3. 渲染器中未跟踪的定时器
4. Mapbox对象在状态中vs引用中
5. useEffect依赖数组（过大、不稳定的引用、回调函数）
6. 图层和数据源管理（setPaintProperty vs 移除/重新添加、存在性检查）
7. GeoJSON数据处理（重新计算、更新频率）
8. 画布性能（像素比、尺寸、getImageData、离屏画布）
9. DOM操作（innerHTML、样式注入）
10. 内存泄漏（事件监听器、不断增长的集合、过时的闭包）

同时检查：

• 组件重新渲染成本（渲染路径中的昂贵计算、大型JSX树）
• 跨文件的重复实用函数（违反DRY原则导致包体积膨胀）

步骤3：报告

按以下结构组织报告：

## 性能审计：[组件名称]

### 评分：[X/10]

### 关键问题
导致可测量的性能下降或内存泄漏的问题。

### 警告
在负载下或随时间推移可能导致性能下降的模式。

### 最佳实践
遵循最佳模式的建议。

### 通过检查
组件已正确处理的项目。

对于发现的每个问题，包括：

• 问题：问题描述
• 位置：文件路径和行号
• 影响：如果不修复会发生什么（内存泄漏、卡顿、不必要的重新渲染等）
• 修复：显示解决方案的具体代码示例

评分指南

• 10/10：未发现问题，遵循所有最佳实践
• 8-9/10：仅有轻微警告，不影响性能
• 6-7/10：存在一些在负载下可能导致问题的警告
• 4-5/10：存在影响用户体验的性能问题
• 2-3/10：导致内存泄漏或严重卡顿的关键问题
• 0-1/10：根本性的性能模式问题