在长列表滚动中，可用worker配合createimagebitmap实现图像预解码：worker下载并解码为imagebitmap后转移至主线程复用，避免主线程阻塞；需复用worker、lru缓存、节流预加载，并做好兼容性降级。
在长列表滚动场景中，图像解码（尤其是大图或 WebP/AVIF 格式）会阻塞主线程，导致掉帧、卡顿。HTML5 的 Worker 本身不能直接操作 DOM 或 Image 对象，但可通过 createImageBitmap() 配合 OffscreenCanvas 在 Worker 中完成**解码前置（pre-decoding）**，把已解码的位图传回主线程复用，从而显著降低滚动时的渲染开销。
核心思路：Worker 中解码 → 生成 ImageBitmap → 传回主线程复用
ImageBitmap 是已解码、可直接绘制到 Canvas 或设置为 <img> 的 src（需支持 createImageBitmap 的浏览器），其解码过程可在 Worker 线程安全执行。关键限制是：Worker 无法访问 fetch 到的 Blob 直接构造 Image，但可以调用 self.createImageBitmap(blob) —— 这正是预解码的核心。
- 主线程只负责发起请求、接收解码结果、设置
img.src = imageBitmap（现代浏览器支持）或绘制到 OffscreenCanvas 后 transfer - Worker 负责下载二进制数据（
fetch(...).then(r => r.arrayBuffer())）、调用createImageBitmap()、将生成的ImageBitmap通过postMessage(..., [imageBitmap])转移所有权 - 必须使用
transferable机制（即在postMessage第二个参数中显式传入[imageBitmap]），否则会拷贝而非转移，失去性能意义
Worker 脚本实现（decoder.worker.js）
注意：Worker 中不能用 URL.createObjectURL()，也不能操作 document，所有资源需以 ArrayBuffer 或 Blob 形式传入。
self.onmessage = async function(e) {
const { url, id } = e.data;
try {
const res = await fetch(url);
const arrayBuffer = await res.arrayBuffer();
// 在 Worker 中解码为 ImageBitmap（真正耗时操作在此发生）
const bitmap = await createImageBitmap(arrayBuffer);
// 转移所有权，避免拷贝
self.postMessage({ id, bitmap, success: true }, [bitmap]);
} catch (err) {
self.postMessage({ id, success: false, error: err.message });
}
};
主线程调度与缓存策略
不要为每张图都新建 Worker；应复用固定数量 Worker（如 2~4 个），配合任务队列 + LRU 缓存已解码的 ImageBitmap（键为 URL），避免重复解码。滚动监听建议节流 + 预加载可视区下方 2~3 屏图像。
- 使用
Map缓存url → Promise<imagebitmap></imagebitmap>，同一 URL 多次请求复用同一个 Promise - 对
<img>元素，可设img.src = ''后立即赋值img.src = imageBitmap（Chrome/Firefox 支持；Safari 16.4+ 支持） - Safari 或需降级：将
ImageBitmap绘制到OffscreenCanvas，再 transfer 到主线程 Canvas 显示 - 务必监听
worker.onerror和超时，失败后回退到原生<img src="...">加载
兼容性与兜底处理
createImageBitmap 在 Chrome 50+、Firefox 42+、Safari 16.4+、Edge 79+ 支持；Worker 中 fetch 需 HTTPS 或 localhost。不支持时应静默降级，不影响功能。
- 检测：
if ('createImageBitmap' in self)在 Worker 中判断 - 主线程可用
if ('createImageBitmap' in window)决定是否启用该流程 - 对 Base64 图片，先在主线程
atob→Uint8Array→Blob→postMessage(blob)传入 Worker，Worker 再createImageBitmap(blob)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
