← 全部作品
2025 · 进行中 · 独立开发
Pixel Cache
一个 4KB 的图片缓存与渐进加载库，用 IndexedDB 做跨会话缓存，弱网下二次访问接近秒开。
- 体积
- 3.9 KB gzip
- 二次访问 LCP
- 2.9s → 0.7s
问题
图片多的页面在弱网下每次刷新都要重新下载，浏览器 HTTP 缓存不可控。
方案
Service Worker 拦截图片请求，命中 IndexedDB 缓存时直接返回 Blob， 未命中时先给一个 24 字节的模糊占位图，真图到位后再替换。
await cache.put(key, await res.clone().blob());状态
仍在迭代：多标签页的缓存一致性还没解决好，正在改用 BroadcastChannel 同步失效信号。