createimagebitmap比new image()更快，因其将图像解码移至后台线程，返回已解码、可直接gpu绘制的位图对象，避免drawimage时卡顿；需注意输入源校验、complete状态检查、resize兼容性及显式close内存管理。
createImageBitmap 为什么比 new Image() + onload 更快
因为 createImageBitmap 把解码过程从主线程剥离，不阻塞渲染和交互。而 new Image() 赋值 src 后触发的解码是同步的——哪怕你加了 onload 或 decode()，图像数据仍可能在首次 drawImage() 时才真正解码完成，导致卡顿或空白帧。
尤其在批量绘制、动画循环或 WebGL 纹理上传场景下，createImageBitmap 的异步 Promise 返回的是一个「已解码、可直接 GPU 绘制」的位图对象，跳过了浏览器内部的延迟解码路径。
怎么正确调用 createImageBitmap 处理常见图片源
它支持多种输入类型，但行为有差异，容易传错参数或漏 await：
-
createImageBitmap(blob)：最常用，适合文件上传后预处理；需确保blob类型正确（如image/jpeg），否则可能静默失败 -
createImageBitmap(imageElement)：必须等imageElement.complete === true才能调用，否则抛InvalidStateError -
createImageBitmap(canvas)：可用于离屏 canvas 快照固化，但注意目标 canvas 必须已绘制完毕 - 带裁剪参数时（
sx, sy, sw, sh）：会创建子区域副本，不修改原图，适合图集提取
示例（安全封装）：
async function safeCreateImageBitmap(source) {
try {
return await createImageBitmap(source, {
resizeWidth: 1024,
resizeHeight: 768,
resizeQuality: 'high'
});
} catch (err) {
console.warn('createImageBitmap failed:', err);
throw err;
}
}
drawImage 传 ImageBitmap 和传 HTMLImageElement 有啥区别
核心区别不在 API 调用方式，而在底层资源状态和兼容性约束：
- 传
ImageBitmap：绘制零等待，ctx.drawImage(bitmap, x, y)立即生效；但必须确保bitmap未被close()，否则报InvalidStateError - 传
HTMLImageElement：即使已触发onload，仍可能因未解码而卡住一帧；且无法使用resize*参数缩放 - 兼容性注意：Safari 在 iOS 16.4 / macOS 13.3+ 才完整支持
createImageBitmap的resize*选项，旧版会忽略并返回原始尺寸 - 性能实测：同张 2000×1500 图，100 次
drawImage调用，用ImageBitmap平均耗时比Image低 3–8ms（Chrome 124）
容易被忽略的内存与生命周期问题
ImageBitmap 是独立内存对象，不会随 DOM 元素自动释放。不手动管理会导致隐式内存泄漏：
- 用完后必须显式调用
bitmap.close()，尤其在频繁切换图片的编辑器或相册页 - 不要在
requestAnimationFrame循环里反复createImageBitmap而不 close —— 单次未释放就可能吃掉几十 MB - 若需复用同一张图多次绘制，缓存
ImageBitmap实例比每次重建更省；但要注意它不可跨 Worker 直接传递，需用transferToImageBitmap或postMessage(..., [bitmap]) - 在离屏 canvas 预渲染流程中，
createImageBitmap(offscreen)是启用 GPU 纹理缓存的关键一步，但前提是 offscreen 的willReadFrequently设为false
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
