火次果
火次果

暂无菜单项

首页/文章/技术文章/web前端/HTML5/
打开 MD 链接

img 的 decoding:异步解码让滚动不卡

发布于 1天前
2

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

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

图片解码优化示意
图片处理和解码,时机对了就不卡

用法直接挂属性:

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

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

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

常见问题(FAQ)

decoding 三个值区别
sync 同步解码可能阻塞渲染;async 异步解码交给浏览器调度;auto 由浏览器自行决定,默认多为此值。
加了 decoding 图片更快吗
不加快下载,只让解码过程不阻塞主线程,滚动与交互更顺。
和 loading=lazy 是一回事吗
不是。lazy 管加载时机(视口临近才下载),decoding 管解码时机,两者互补。
所有图片都加 async 吗
首屏关键图可用 sync 保证立即可见,其余列表图用 async 更利于流畅。
老浏览器不支持怎么办
属性被忽略,图片照常显示,只是没有异步解码这层优化,无副作用。
decoding属性img decoding图片加载性能图片异步解码渲染优化
支持作者
如果这篇内容对你有帮助,可以请作者喝杯咖啡
0 点赞
0 收藏
分享
0 讨论
反馈
0 / 600
细中粗
0 讨论
热门最新
总结
暂无总结
嗨,下午好!
所有的成功,都源自一个勇敢的开始
创作
社区
购物
会员
近期热门

暂无数据

火次果
火次果
首页
资迅中心
小店
AI导航
社区
所有的成功,都源自一个勇敢的开始
不辜负每一个勇敢的开始
关于FAQ协议
火次果 © 2026鲁ICP备2025164830号-1