decoding属性仅控制解码时机而非加载时机；设为async可避免主线程阻塞，但需配合loading="lazy"、宽高声明、正确srcset/sizes及.webp/.avif格式才生效。
decoding 属性只管解码时机，不管加载时机。加了它，图片不会下载得更快，但解码过程可能不卡主线程——前提是用对了场景、配齐了条件。
decoding="async" 在表格里为什么没效果
表格单元格（<td>）本身不参与解码调度，<code>decoding 只作用于 <img> 标签，且必须等数据下载完才触发异步解码。表格里常见问题不是“没生效”，而是被其他因素掩盖：
- 没配
loading="lazy"：表格一渲染就批量触发所有图下载+解码，异步也救不了 - 缺
width和height（或aspect-ratio）：表格列宽随解码完成跳变，重排比解码卡顿更伤体验 - 用了
<picture></picture>包裹：属性写在<source></source>上无效，必须落在最终渲染的<img>上 - srcset 没配
sizes：浏览器选错高清图，单张体积翻倍，解码压力不降反升
decoding="sync" 不是默认值，也不是“更安全”的选项
现代浏览器（Chrome ≥ 87、Firefox ≥ 78、Safari ≥ 16.4）对未声明 decoding 的 <img>，实际默认走异步路径。所以：
- 不写
decoding≠ 同步解码 - 写了
decoding="sync"= 强制主线程等解码完成再渲染，适合极少数场景 - 仅两类情况必须显式设：
img.naturalWidth/Height要立刻参与布局计算；或图片是 UI 基础元素且需帧级同步（如动画首帧、canvas 贴图入口） - 滥用
decoding="sync"会导致主线程阻塞，尤其多张图并存时，首屏延迟加剧
动态生成表格时 decodings 设置时机很关键
JavaScript 拼字符串插入表格，容易漏掉赋值顺序。关键点在于：decoding 必须在 img.src 赋值前设置，否则旧版 Chrome（≤ 86）会静默丢弃；用 createObjectURL() 时同理，要在 img.src = url 之前设好。
- React/Vue 渲染表格时，别手动加——组件库（如 Ant Design Table）通常已封装懒加载，加了可能被覆盖
- 最终检查 DOM：用浏览器开发者工具确认
<img>元素上真有decoding="async" - 框架中若用
useEffect或mounted后设属性，已晚；必须在元素创建时即注入
真正影响感知性能的从来不是 decoding 单独开关
加了 decoding="async" 还卡？大概率是下面三件事没做齐：
- 图片尺寸没匹配展示区域（比如表格单元格宽 120px，却塞进 2000px 宽的图）
- 格式不是
.webp或.avif，JPEG 解码开销大，异步收益有限 - 没声明
width和height，导致 CLS（累积布局偏移），滚动时视觉抖动比解码延迟更明显
这些点漏掉任何一个，decoding="async" 就只是个好看的摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
