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

Question

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

我经常听到人们简单地说“让图片在后台下载”。但是，仅使用此信息进行下一步合理操作，在查看 Time to Interactive 或 Time to First Meaningful Paint 时，图像对 Web 应用程序性能的影响应该为 0。根据我的经验，它不会。通过在图像繁重的页面上延迟加载图像（使用 IntersectionObserver）与“只让它们在后台下载”相比，性能提高了 2-4 秒。

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

Answer 1

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

网络请求不由 CPU 处理，因此这里应该没有开销。

解析元数据取决于实现，可以使用相同的进程或某个专用进程，但通常这不是一个繁重的调用。

解码图像数据和光栅化也取决于实现，一些浏览器会在获取数据时直接执行，而其他浏览器会等到真正需要执行此操作，尽管there are ways 以确保同步完成（在相同的线程）。

绘制图像可能是硬件加速（在 GPU 上完成）或由软件完成（在 CPU 上），在这种情况下可能会影响一般性能，但现代渲染器可能会丢弃不在当前视口中的图像.

最后，让您的<img> 元素根据其内容调整大小将导致您的页面完全重排。这通常是在网页中加载图像时最显着的性能损失，因此请务必通过 CSS 设置图像的大小以防止重排。