performance

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

Make the UI fast and stable. Treat performance as an accessibility concern — slow/janky UIs fail low-end devices first.

让 UI 快速且稳定。将性能视为可访问性问题——卡顿、运行缓慢的 UI 最先会在低端设备上出现问题。

Read
```
workflows/performance.md
```
(Core Web Vitals targets, loading strategy, layout-shift, animation perf, design-system runtime cost).
Diagnose against budgets: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Measure on a mid-tier mobile profile (throttle slow 4G + 4× CPU).
Loading: render above-fold first (SSR/Server Components), code-split by route + heavy widget, lazy-load below-fold/behind-interaction (Astro islands / Qwik), preload one critical font weight, modern responsive images.
Kill layout shift: size skeletons to final dimensions, reserve media space via
```
aspect-ratio
```
(
```
tokens/sizing.json
```
), never inject content above existing.
Animation: only
```
transform
```
/
```
opacity
```
,
```
will-change
```
sparingly, 100–300ms (
```
tokens/motion.json
```
), honor
```
prefers-reduced-motion
```
. Prefer CSS state styling over JS for low INP; tree-shake/per-component imports.

阅读
```
workflows/performance.md
```
（包含 Core Web Vitals 指标目标、加载策略、布局偏移、动画性能、设计系统运行时成本等内容）。
对照指标预算进行诊断：LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1。使用中端移动设备配置进行测试（限速为慢 4G + 4 倍 CPU 降频）。
加载优化：优先渲染首屏内容（SSR/Server Components），按路由 + 重型组件进行代码分割，对首屏外、需交互触发的内容进行懒加载（Astro islands / Qwik），预加载一种关键字重的字体，采用现代响应式图片方案。
消除布局偏移：将骨架屏尺寸设置为最终内容的实际尺寸，通过
```
aspect-ratio
```
预留媒体元素空间（配置见
```
tokens/sizing.json
```
），严禁在已有内容上方插入新内容。
动画优化：仅使用
```
transform
```
/
```
opacity
```
属性实现动画，谨慎使用
```
will-change
```
，动画时长控制在 100–300ms（配置见
```
tokens/motion.json
```
），遵循
```
prefers-reduced-motion
```
设置。为实现低 INP，优先使用 CSS 状态样式而非 JS；采用摇树优化及按组件导入的方式。

Lighthouse / field data meets LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 on mid-tier mobile.
First interaction stays responsive under slow-4G + 4× CPU throttle.
Skeletons + media reserve space (zero CLS on load); no non-compositor animation in loops.