Service Worker 实现大图懒加载与 WebP 转换，核心是接管请求控制权：1. 拦截图片请求并延迟至视口前1–2秒发起；2. 依Accept头动态切换WebP/原格式并双层降级；3. 分层缓存策略保障性能与容错。
用 service worker 实现大图懒加载与 webp 转换，核心在于把“请求控制权”从浏览器默认行为收归前端逻辑——既推迟非关键图片的加载时机，又按需提供最优格式，还能在失败时自动兜底。
懒加载：靠 SW 拦截 + 缓存预判实现“真延迟”
不同于传统基于 IntersectionObserver 的懒加载（仍需首次触发才发请求），Service Worker 可在用户尚未滚动时就静默拦截并暂缓图片请求，只在图片即将进入视口前 1–2 秒才发起真实网络请求。
在 SW 中监听
事件，对匹配
的请求暂不响应，而是存入待加载队列
配合页面中发送的
消息（例如
），SW 主动 fetch 并缓存对应大图
当用户真正滚动到该区域，
请求命中缓存，毫秒级返回，无网络等待
WebP 自动适配：靠 Accept 头动态响应
浏览器在请求图片时，会在请求头中带上
（如果支持 WebP）。SW 正是利用这一点做格式协商，无需改 HTML 或后端路由。
SW 拦截图片请求后，检查
是否包含
若支持，将原请求 URL 的
替换为
，再向服务端发起新请求（或直接从已缓存的 WebP 版本读取）
若不支持或 WebP 请求失败（如 404），自动 fallback 到原始格式，并缓存该降级结果，避免重复探测
双层降级保障：格式失败 + 网络失败都兜得住
单靠格式切换不够稳健。真实场景中，可能遇到 WebP 文件缺失、CDN 缓存未同步、甚至整个图片服务临时不可用。SW 需覆盖多级容错。
第一层：格式降级 —— 请求
失败时，立即重试
，并将结果写入 cache
第二层：资源降级 —— 所有图片请求均配置备用占位图（如
），确保不白屏
第三层：离线兜底 —— 在 install 阶段预缓存一组通用占位图和错误图，即使断网也能渲染基础内容
缓存策略要精细：区分大图、缩略图与占位图
统一缓存所有图片会快速撑爆 Storage API 限额。应按用途分策略管理：
大图（原图）
：使用
策略，有效期设为 7 天，配合 ETag 验证更新
缩略图 / 占位图
：使用
，始终优先返回缓存，后台静默更新
WebP 转换中间态（如 /convert?src=xxx）
：禁用缓存，由后端控制，避免 SW 缓存脏数据
fetch/images/.*\.(jpg|jpeg|png)$postMessage{type: 'preload-next', index: 3}fetchAccept: image/webp,*/*event.request.headers.get('Accept')image/webp.jpg.webpphoto.webpphoto.jpg/placeholders/lowq-32x32.jpgcacheFirststaleWhileRevalidate