背景 GIF 优化方案
06-性能优化2026/11/14
问题
/about 页面 Hero 区域使用了一张约 30MB 的 GIF 动画 (public/assets/about/about_bg.gif) 作为全屏背景，并通过 Next.js <Image> 组件的 priority 属性预加载。
每次访问 About 页面时，浏览器需要下载完整的 30MB GIF 文件后才能完成首屏渲染，导致页面白屏时间过长。
原因分析
| 问题 | 说明 |
|---|---|
| 文件体积大 | GIF 格式无帧间压缩，30MB 包含所有帧的完整像素数据 |
| 阻塞渲染 | priority 属性使 Next.js 将其作为关键资源预加载，浏览器在下载完成前不会完成渲染 |
| 内存占用高 | GIF 解码后将所有帧常驻内存 |
| 无流式加载 | 图片资源需要完整下载后才能显示 |
优化方案
将 GIF 动画替换为视频格式（WebM + MP4），利用视频的帧间压缩和流式加载特性。
核心优势
| 指标 | 优化前（GIF） | 优化后（Video） |
|---|---|---|
| 文件大小 | ~30MB | ~1-2MB |
| 首屏阻塞 | priority 阻塞渲染 | 异步加载 + poster 即时显示 |
| 内存占用 | 全部帧常驻内存 | 流式解码，仅当前帧 |
| 加载体验 | 白屏等待 | 立即看到静态背景 → 动画淡入 |
技术实现
1. 新增客户端组件 VideoBackground.tsx
src/components/about/VideoBackground.tsx — 专门处理视频背景的客户端组件：
- Poster 即时渲染：先用一张静态 JPG 图（几十KB）作为即时背景，确保首屏秒开
- 视频异步加载：
<video>标签异步加载 WebM/MP4，不阻塞页面渲染 - 平滑过渡：视频就绪后通过 CSS
opacity0.6s 淡入切换，视觉无缝 - 格式回退：优先加载体积最小的 WebM，MP4 作兼容回退
- 移动端兼容：
muted+playsInline确保 iOS/Android 自动播放
'use client';
export function VideoBackground() {
const [videoReady, setVideoReady] = useState(false);
return (
<>
{/* Poster 占位 — 即时显示 */}
<div
className="absolute inset-0 bg-cover bg-center"
style={{
backgroundImage: 'url(/assets/about/about_bg_poster.jpg)',
opacity: videoReady ? 0 : 1,
transition: 'opacity 0.6s ease-in-out',
}}
aria-hidden="true"
/>
{/* 视频背景 — WebM 优先，MP4 回退 */}
<video
autoPlay loop muted playsInline preload="metadata"
className="absolute inset-0 h-full w-full object-cover"
onCanPlay={() => setVideoReady(true)}
>
<source src="/assets/about/about_bg.webm" type="video/webm" />
<source src="/assets/about/about_bg.mp4" type="video/mp4" />
</video>
</>
);
}