SKILL

---
name: FutureBirdAadminAi-coding-web-performance-best-practice
description: 性能最佳实践
---

# Web 性能优化 Skills

## 1. 减少重绘与重排

- 使用 CSS class 切换代替逐属性修改样式
- 使用 `transform`/`opacity` 做动画，不用 `left`/`top`/`width`/`height`
- DOM 读写分离，避免布局抖动（先批量读再批量写）
- 频繁变化元素加 `will-change: transform`，动画结束后移除
- 使用 `contain: layout style paint` 限制重排/重绘范围
- 动画用 `requestAnimationFrame`，不用 `setTimeout`/`setInterval`

## 2. 首屏加载优化

- 内联首屏关键 CSS，非关键 CSS 延迟加载
- JS 使用 `defer`/`async`，非首屏脚本用动态 `import()`
- 首屏 LCP 图片加 `fetchpriority="high"`，禁止懒加载
- 非首屏图片加 `loading="lazy"`
- 使用 `preconnect`/`preload`/`prefetch` 优化资源加载时序
- 图片使用 WebP/AVIF 格式，带 `<picture>` fallback

## 3. 运行时性能

- 长任务（>50ms）拆分，保持 INP ≤ 200ms
- 长列表使用虚拟滚动，仅渲染可视区域 DOM
- 高频事件（scroll/resize/input）做防抖/节流
- CPU 密集计算移至 Web Worker

## 4. CLS 优化

- 所有图片/视频设置 `width`/`height` 或 `aspect-ratio`
- 字体用 `font-display: swap` + `size-adjust`
- 动态内容预留空间（`min-height` + `contain: layout`）
- 避免在视口顶部动态插入内容

## 5. 外部资源域名地域适配（CN 优先使用官方 .cn 域）

为避免跨境链路带来的高时延与间歇性失败，第三方资源域名需按访问区域选择最优可达域。

- 原则
  - 根据访问区域选择官方提供的区域域名或镜像；在中国大陆环境优先使用官方 .cn 域。
  - 仅使用官方域或自有 CDN 代理，谨慎使用来历不明的第三方镜像，确保稳定性与合规性。
  - 对不同区域的域名选择做成可配置（构建期或运行时），避免硬编码。

### 域名映射表

| 资源类型             | 全球域名                       | 中国大陆域名                             | 备注               |
| ---------------- | -------------------------- | ---------------------------------- | ---------------- |
| Google Fonts CSS | `fonts.googleapis.com`     | `fonts.googleapis.cn`              | 字体样式表            |
| Google Fonts 文件  | `fonts.gstatic.com`        | `fonts.gstatic.cn`                 | 字体文件（woff2 等）    |

> 表格中标注 "—" 的表示该服务无官方 CN 域，需自建代理或使用国内替代方案。如有新的映射需求，直接在表格中追加行即可。

### ✅ 正例 vs ❌ 反例

#### HTML 资源引入

**❌ 反例：CN 环境仍使用全球域名**

```html
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
```

**✅ 正例：CN 环境使用官方 `.cn` 域名**

```html
<link rel="preconnect" href="https://fonts.googleapis.cn" crossorigin>
<link href="https://fonts.googleapis.cn/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
```

#### JS 域名配置

**❌ 反例：硬编码单一域名**

```js
const GOOGLE_FONTS_HOST = 'https://fonts.googleapis.com';
```

**✅ 正例：按区域动态切换**

```js
const REGION = process.env.REGION; // 'cn' | 'global'
const GOOGLE_FONTS_HOST = REGION === 'cn'
  ? 'https://fonts.googleapis.cn'
  : 'https://fonts.googleapis.com';
```