decoding="sync"是强制同步解码的时序锁，仅两类场景必须使用：一是需立即读取naturalwidth/height参与布局计算，二是ui基础元素有严格帧同步要求；否则会阻塞主线程、加剧卡顿。
decoding="sync" 不是“让图片更快显示”的开关，而是强制主线程等解码完成再渲染的时序锁 —— 用错地方，首屏反而更卡。
什么时候必须写 decoding="sync"
只有两类真实场景需要显式加：decoding="sync"：
- 需要立即读取
img.naturalWidth或img.naturalHeight参与布局计算（比如动态生成<canvas></canvas>贴图、CSS Grid 容器尺寸依赖该值） - 图片是 UI 基础元素且有严格帧同步要求（如动画序列第一帧、实时滤镜预览入口图），否则可能因解码延迟导致视觉撕裂或 layout thrashing
注意：banner 图、文章配图、用户头像、懒加载缩略图 —— 全都不属于这个范畴。写了反而拖慢交互。
decoding="sync" 和不写 decoding 的实际区别
现代浏览器（Chrome ≥ 87、Firefox ≥ 78、Safari ≥ 16.4）对未声明 decoding 的 <img>，默认走异步解码路径。也就是说：
- 不写
decoding≠ 同步解码 —— 这是常见误解 - 写了
decoding="sync"= 强制主线程阻塞，直到像素解码完成才插入渲染树 -
decoding="auto"是个占位符，浏览器忽略它，行为等同于不写
如果你真需要同步时机，必须显式写 decoding="sync"，不能靠“不写就默认同步”来赌。
搭配 img.decode() 时为什么还要设 decoding="sync"
在 canvas 绘图前调用 await img.decode()，若图片未提前设 decoding="sync"，某些浏览器（尤其是 Safari）会抛 SecurityError —— 因为异步解码后的图像数据被标记为“不可读”，无法用于 canvas 操作。
- 正确顺序：
img.decoding = "sync"; await img.decode(); - 仅靠
img.decode()不足以绕过安全限制，必须配合属性声明 - 这和跨域策略无关，是浏览器对异步解码图像数据的访问控制机制
容易被忽略的性能代价
decoding="sync" 的核心作用是时序对齐，不是提速。滥用会导致：
- 主线程被长时间占用，低端设备上滚动/点击明显卡顿
- 多张
sync图并存时，解码串行排队，首屏渲染延迟加剧 - 误以为能解决图片空白或闪烁 —— 实际上
decoding="async"才是为防卡顿设计的，sync反而可能放大抖动
真正难处理的是「既要解码完成又要不卡主线程」的边界场景，比如 canvas 动画首帧 + 首屏大图叠加。这时候得结合 img.decode() 手动控制解码时机，而不是只靠属性硬塞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
