此文件通过 Web 特定性能内容扩展 common/performance.md。

Web 性能规则¶

Core Web Vitals 目标¶

捆绑包预算¶

加载策略¶

1. 在适当情况下，内联关键首屏 CSS
2. 仅预加载主视觉图像和主要字体
3. 延迟加载非关键 CSS 和 JS
4. 动态导入重量级库

const gsapModule = await import('gsap');
const { ScrollTrigger } = await import('gsap/ScrollTrigger');

图像优化¶

• 显式指定 width 和 height
• 仅对主视觉媒体使用 loading="eager" 和 fetchpriority="high"
• 对首屏以下资产使用 loading="lazy"
• 优先使用带回退的 AVIF 或 WebP
• 不要提供远大于渲染尺寸的源图像

字体加载¶

• 除非有明确例外，字体族最多 2 个
• font-display: swap
• 尽可能进行子集化
• 仅预加载真正关键的权重/样式

动画性能¶

• 仅动画合成友好属性
• 小范围使用 will-change，并在完成时移除
• 简单过渡优先使用 CSS
• JS 动效使用 requestAnimationFrame 或成熟的动画库
• 避免滥用滚动处理器。使用 IntersectionObserver 或行为良好的库

性能检查清单¶

• [ ] 所有图像都有显式尺寸
• [ ] 没有意外的渲染阻塞资源
• [ ] 没有由动态内容引起的布局偏移
• [ ] 动效仅限于合成友好属性
• [ ] 第三方脚本以 async/defer 方式加载，且仅在需要时使用