项目里很多图片和视频，怎么优化

图片视频优化分四层：网络层（CDN/格式）、加载层（懒加载/预加载）、渲染层（解码/缓存）、业务层（按需/降级）。面试要把这四层都讲到位才算有体系。

#四层优化模型

复制用户看到一张图的链路：

请求 → DNS → TLS → CDN → 服务器 → 下载 → 解码 → 上屏 → 渲染
 ↓        ↓      ↓        ↓        ↓      ↓      ↓
网络层              网络层              加载层    渲染层
       ←──────────────── 业务层（按需/降级）────────────────→

#第 1 层：网络层（省钱、省时间）

核心目标：让资源体积小、让用户拿到资源快

面试装逼句：“我们项目用 AV1 替换 H.264，首帧体积降了 40%，但要兼容 Safari 14-，所以 fallback 到 H.264”

#第 2 层：加载层（控制请求时机）

核心目标：用户要时再要，要了就一次成功

重要细节：

• loading="lazy" 原生属性，但 Safari 15.4 才支持，旧设备用 IntersectionObserver
• 视频要加 preload="metadata" 而非 preload="auto"，否则移动端一进页面就下完整个视频
• <link rel="preload"> 优先级最高，用来抢首屏关键资源

#第 3 层：渲染层（让浏览器更省力）

核心目标：解码快、绘制快、不抖动

CLS（Cumulative Layout Shift）是 LCP 之外的另一关键指标——图片不写 width/height 就布局抖动。

#第 4 层：业务层（最容易被忽视）

核心目标：能不传就不传、能降级就降级

#视频专项优化（面试加分项）

1. 视频比图复杂得多——一个 1080p 视频没优化可能几百 MB。

2. 必做的三件事：

• 转码多份：服务端用 ffmpeg 转 360p/720p/1080p 多档，移动端按网速选
• 切片 HLS/DASH：把视频切成 5-10s 的 .ts 小文件，可以边下边播
• 首屏秒开：前 1-2 秒单独放一个 GZIP 文件，首帧独立加载

3. 播放器层面：

• 离开视口自动暂停（IntersectionObserver）
• 静音自动播放（移动端策略限制）
• 不用 <video autoplay> —— 会触发下载整个视频
• 视频封面用 <video poster="">，不要把封面图当成一个额外资源

#高频面试追问

Q1：图片懒加载怎么实现？

复制// 现代方案
<img loading="lazy" src="..." />

// 兼容方案
const obs = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.src = e.target.dataset.src
      obs.unobserve(e.target)
    }
  })
}, { rootMargin: '200px' })

document.querySelectorAll('img[data-src]').forEach(img => obs.observe(img))

Q2：首屏白屏怎么优化？

• 关键 CSS 内联（critical CSS）
• 字体 subset + font-display: swap
• 服务端渲染（SSR）/ 静态生成（SSG）
• 骨架屏（Skeleton）

Q3：移动端图片适配怎么做？

复制<img
  src="img-1x.jpg"
  srcset="img-1x.jpg 1x, img-2x.jpg 2x, img-3x.jpg 3x"
  sizes="(max-width: 600px) 100vw, 50vw"
/>

Q4：CDN 缓存策略？

• HTML：no-cache，每次回源
• 静态资源（JS/CSS/图片，带 hash）：max-age=31536000, immutable，永不过期
• 接口：no-store 或短缓存

#一句话答题模板

项目里图片视频优化我分四层做：网络层（WebP/AVIF、CDN、HTTP/2）解决"传得小传得快"；加载层（懒加载、预加载、骨架屏）解决"按需加载"；渲染层（GPU 加速、固定尺寸、防抖）解决"画得快不抖动"；业务层（缩略图、降级、abort、缓存策略）解决"不浪费"。视频额外做转码多档、HLS 切片、首屏秒开。

#延伸阅读

• 图片性能优化：了解JPEG、GIF、PNG、WebP、Base64的优缺点：图片格式选型
• 图片懒加载的实现方法：懒加载代码细节
• 懒加载：让网页像优雅的绅士：懒加载原理深挖
• 全面横评 6 大前端视频播放器：视频播放器选型
• 使用 WebCodec 在浏览器解码视频、抓帧截图、转GIF：WebCodec 进阶
• 揭秘 Next.js 的图像魔法：框架级图片处理
• 懒加载图片在同一个 Item 中逐个出现的原因与解决方案：实战踩坑