表格中加decoding="async"仅对宽≥1000px或体积≥200kb的大图有效，须配合loading="lazy"、显式宽高及webp/avif格式，且必须直接写在标签上，写在或动态插入未前置赋值均无效。
表格里加 decoding="async" 有用吗
只对表格中宽 ≥ 1000px 或体积 ≥ 200KB 的大图有效，比如商品详情页的规格图、报表截图、设计稿预览图。表格本身不改变 decoding 的行为逻辑——它仍只作用于 <img> 元素，且必须等图片数据完全下载完才触发异步解码。表格单元格（<td>）里塞小图标、头像、状态徽章图，加了反而可能因解码调度开销引发短暂空白。
<h3>
<code>decoding="async" 在表格中必须配哪些属性
单独写在 <img> 上没用，尤其在表格这种易重排结构里。以下条件缺一不可：
-
loading="lazy"：防止表格一渲染就批量触发所有图下载+解码，尤其是长表格滚动时 - 显式
width和height（或aspect-ratio）：表格单元格默认不设尺寸，没这俩属性会导致解码完成后重排整行，Paint flashing 闪红比卡顿还明显 - 现代格式：优先用
.webp或.avif，JPEG 在表格大图中解码压力更大，异步收益更依赖格式 - 不能写在
<picture></picture>或<source></source>上：表格里常见用<picture></picture>做响应式图，但decoding只认最终渲染的<img>标签
动态生成的表格怎么设 decoding="async"
JavaScript 拼接字符串插入表格时，容易漏掉赋值时机。旧版 Chrome（≤ 86）会静默丢弃后设的 decoding：
- 错：
const img = new Image(); img.src = 'table-photo.avif'; img.decoding = 'async';（src设完再设decoding，无效） - 对：
const img = new Image(); img.decoding = 'async'; img.src = 'table-photo.avif';（必须在src前） - 如果用
fetch()+createObjectURL()，同样要在img.src = url之前设好decoding - 框架如 React/Vue 渲染表格时，别手动加——组件库（如 Ant Design Table）通常已封装图片懒加载，加了可能被覆盖；检查最终 DOM 是否真有
decoding="async"
为什么表格里加了 decoding="async" 还卡
表格场景下最容易被忽略的是布局干扰和资源竞争：
-
srcset没配sizes：浏览器选错高清图，单张表单元格图体积翻倍，解码压力不降反升 - 父容器用了
overflow: hidden+loading="lazy"：表格滚动时某些<tr> 被裁剪，图片永远不进视口，根本不会加载 <li>没声明尺寸导致 CLS（累积布局偏移）：表格列宽随图片解码完成跳变，触发重排，滚动卡顿根源不在解码而在 layout</li> <li>多张大图集中出现在同一屏表格行：即使异步解码，后台线程仍排队处理，主线程虽不阻塞，但绘制阶段仍可能因纹理上传挤占 GPU 资源</li> <p>真正难处理的是「表格首行固定 + 大图 + 滚动监听」这类组合场景——此时 <code>decoding="async"只解决一半问题，得配合img.decode()手动控制解码完成时机，否则快速滚动时图片仍会延迟渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
