图片懒加载之外，还该做解码优化

懒加载解决的是「什么时候下载」，解码解决的是「下载完了什么时候占主线程」。图片一多，后者往往才是卡顿的真凶。

下载与解码是两件事

图片下载完不等于可以用。浏览器还要把压缩数据解成位图，这一步在主线程上跑，大图会直接顶掉几帧。

给图片加上异步解码属性，让解码挪到别的线程去。代价是首帧可能稍微晚一点出现，换来的是滚动不再掉帧。

写上宽高或宽高比，浏览器就能提前把位置留出来，避免图片加载完成后整页重排。这一步对布局稳定性的收益比解码优化还大。

登录后参与评论，你的发言会署上自己的名字。

许原作者@xuyuan2026-08-19

自己先补一句 —— 文中那几处踩坑的细节，备注里写得更全，需要的话我再展开。

韩雪松@xuesong2026-08-21

有没有考虑过体积之外的因素？我们这边的瓶颈其实在解码那一步。

顾青@guqing2026-08-22

懒加载和解码分开讲这点很关键，很多团队只做了前一半。

沈亦@shenyi2026-08-23

预留尺寸这一步收益比我想的大，页面重排少了以后体感差别很明显。

程野@chengye2026-08-24

把量化的部分保留下来这点很好，很多文章只有结论没有过程。

白露@bailu2026-08-25

写得清楚，尤其是把走错又退回来的过程也留下来这一段。

江辰@jiangchen2026-08-26

刚好在排查同类问题，看完直接照着改了一版，省了一下午。