必须显式添加 decoding="sync" 仅限两类场景：一是需立即读取 naturalWidth/Height 参与布局计算；二是有严格帧同步要求的 UI 基础元素，否则易致视觉撕裂或 layout thrashing。
decoding="sync" 什么时候必须加
只有两类情况建议显式写 decoding="sync"：一是需要立即读取 img.naturalWidth 或 img.naturalHeight 并参与布局计算（比如动态生成 canvas 贴图、CSS Grid 容器尺寸依赖）；二是图片作为 UI 基础元素且有严格帧同步要求（如动画序列帧第一帧、实时滤镜预览入口图），否则可能因解码延迟导致视觉撕裂或 layout thrashing。
注意：decoding="sync" 不等于“更快”，它反而会延长主线程占用时间。大多数 banner 图、文章配图、用户头像都不属于这个范畴。
decoding="sync" 和不写 decoding 的区别
现代浏览器（Chrome ≥ 87、Firefox ≥ 78、Safari ≥ 16.4）对未声明 decoding 属性的 <img>，实际行为默认走异步路径 —— 这和很多人直觉相反。也就是说，不写 decoding ≠ 同步解码。
所以如果你真需要同步解码，必须显式写 decoding="sync"，不能靠“不写就默认同步”来赌。
立即学习“前端免费学习笔记（深入）”；
- 写了
decoding="sync"：浏览器强制在主线程完成解码后才渲染，确保像素级时序对齐 - 不写或写
decoding="auto"：多数浏览器按需异步解码，auto是个占位符，别指望它智能切换
decoding="sync" 的典型使用场景和写法
适用于首屏关键图、小图标、logo 等必须“秒出且像素稳定”的元素。常见组合：
<img src="logo.png" decoding="sync" width="120" height="40" alt="公司 Logo"><img src="hero-banner.jpg" decoding="sync" loading="eager" alt="首页主图">- 配合
canvas绘图前确保解码完成：await img.decode()前先设decoding="sync"，避免 SecurityError
不要用于懒加载图（loading="lazy"）、列表缩略图、大图背景 —— 这些用 decoding="async" 更合适。
容易踩的坑：sync 不是性能优化，而是时序控制
decoding="sync" 的核心作用是控制解码时机与渲染时序的对齐，不是提升加载速度或节省资源。滥用会导致：
- 主线程被长时间阻塞，页面交互卡顿（尤其低端设备）
- 多张
sync图并存时，解码排队，首屏渲染延迟加剧 - 误以为它能解决图片空白/闪烁问题 —— 实际上 async 才是为防卡顿而设计，sync 反而可能放大视觉抖动
真正难处理的是「既要解码完成又要不卡主线程」的边界场景，比如 canvas 动画首帧 + 首屏大图叠加。这时候得结合 img.decode() API 手动控制，而不是只靠属性。
