浏览器下载图像的性能成本是多少？

Question

图像不会阻塞初始渲染。我相信这大部分都是真的。这意味着从网络请求/下载图像不会发生在主线程上。我假设解码/光栅化图像也发生在一些浏览器的主线程之外(但我可能错了)。

我经常听到人们简单地说“让图片在后台下载”。然而，仅使用这些信息进行下一个合理的步骤，当查看Time to Interactive或Time to First Interactive paint时，图像应该对web应用程序的性能没有影响。从我的经验来看，与“让它们在后台下载”相比，通过在图片繁重的页面上懒惰地加载图片(使用IntersectionObserver)，性能提高了2-4秒。

在加载网页时，浏览器内部解码/绘制图像的哪些特定步骤会导致性能下降？哪些步骤从主线程获取资源？

Answer 1

这有点宽泛，有很多事情会影响页面的其余部分，所有这些都取决于许多不同的因素。

网络请求不是由CPU处理的，所以这里应该没有开销。

解析元数据依赖于实现，可以使用相同的过程，也可以使用某个专用的过程，但通常这不是一个繁重的任务。

解码图像数据和光栅化也依赖于实现，一些浏览器会在获得数据时直接执行，而其他浏览器会等到真正需要时才执行此操作，尽管使用there are ways来确保同步完成(在同一线程上)。

绘制图像可能是硬件加速的(在GPU上完成)，也可能是由软件(在CPU上)完成的，在这种情况下，可能会影响常规性能，但现代渲染器可能会丢弃当前视口中不存在的图像。

最后，根据<img>元素的内容调整其大小将导致页面完全重排。这通常是在网页中加载图像时最显著的性能影响，因此请确保通过CSS设置图像的大小，以防止出现回流。