decoding属性控制图片解码时机，非加载策略；取值sync/async/auto，分别对应主线程同步、异步解码及浏览器自动判断，配合loading="lazy"可缓解滚动卡顿。
img 标签的 decoding 属性到底有什么用
它控制浏览器如何解码图片数据，不是加载策略，也不是懒加载开关。核心作用是：让浏览器决定是否在主线程同步解码，还是异步解码、甚至延迟到渲染前一刻再解码。对长列表、瀑布流、含大量 <img> 的页面，能明显减少主线程阻塞，提升滚动流畅度。
三种取值的实际表现和适用场景
decoding 只接受三个字符串值："sync"、"async"、"auto"。浏览器默认是 "auto"，但多数现代浏览器（Chrome 78+、Firefox 95+、Safari 16.4+）实际行为更接近 "sync"，尤其对非懒加载图片——这意味着你得主动改。
-
"sync"：强制主线程同步解码，适合首屏关键图（如 banner、logo），确保不闪、不跳；但会阻塞渲染线程 -
"async"：明确告诉浏览器“这张图可以异步解码”，适合非首屏、非焦点区域的图片（如商品列表、评论头像） -
"auto"：由浏览器自行判断，目前兼容性好但不可控，不建议依赖
配合 loading="lazy" 使用时要注意什么
两者不互斥，但存在隐式协同关系：loading="lazy" 延迟加载，decoding="async" 延迟解码。但注意：如果图片已加载完成（比如通过预加载或缓存），decoding="async" 仍生效，而 loading="lazy" 就不再起作用了。
- 懒加载图片强烈建议同时加
decoding="async"，避免滚动到视口时集中解码卡顿 - 不要给
loading="eager"的首屏图设decoding="async"，可能导致渲染时无图或短暂空白 - 服务端渲染（SSR）页面中，若图片 HTML 已直出，
decoding属性会立即生效，无需 JS 干预
实测容易被忽略的兼容性和副作用
这个属性在 Safari 16.4 之前完全不支持，且旧版 iOS WebView 会静默忽略——不是报错，而是当不存在。更隐蔽的问题是：某些图像 CDN 或响应式图片方案（如 <picture> + <source>）中，decoding 必须写在 <img> 上，写在 <source> 上无效。
立即学习“前端免费学习笔记（深入）”；
- 检查是否生效：打开 Chrome DevTools → Rendering → 勾选 “Paint flashing”，快速滚动，观察非首屏图片是否仍有大面积黄色闪烁（说明仍在同步解码）
- Webpack/Vite 构建时若用了 HTML 插件自动压缩，可能删掉未知属性，需配置保留
decoding - Vue/React 中动态渲染
<img>时，确保属性名拼写正确（不是decodingAttr或驼峰写法）
loading="lazy"。真正起效的关键点，往往藏在那行不起眼的 decoding="async" 里。 
