### [img 的 decoding：异步解码让滚动不卡](https://www.huociguo.com/article/1847)

**Published:** 2026-10-03T02:35:19

**Author:** 米了

**Excerpt:** 🖼️ 长列表图片一多，手指滚动就掉帧，主线程被图片解码占满。给 加上 ，顿挫感少了一大半。 三个取值： 同步解…

🖼️ 长列表图片一多，手指滚动就掉帧，主线程被图片解码占满。给 `img` 加上 `decoding="async"`，顿挫感少了一大半。

`decoding` 三个取值：`sync` 同步解码，可能阻塞渲染；`async` 交给浏览器调度，不卡主线程；`auto` 由浏览器自己决定。默认多是 `auto`。

![图片解码优化示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-16313517.jpeg)

图片处理和解码，时机对了就不卡

用法直接挂属性：

```
<img src="a.jpg" loading="lazy" decoding="async" alt="...">
```

⚠️ 注意：`decoding` 只管解码时机，不影响下载速度。大图该压缩还得压缩，`loading="lazy"` 管加载、`decoding` 管解码，两件事分开看。首屏关键图可保留 `sync`，其余用 `async`。

其余浏览器不支持这个属性时，直接忽略，显示不受影响，只是少了这层优化。

**Tags:** decoding属性, img decoding, 图片加载性能, 图片异步解码, 渲染优化

**Categories:** HTML5

---