css - 多个图像与 spritesheet

Question

“简单”问题。

为站点元素使用大型 spritesheet 是否比使用多张图片更好？ 我的意思是，额外的 CSS 图像处理(背景定位大图像并裁剪它)是否弥补了较少的 HTTP 图像请求？

Answer 1

number of concurrent HTTP/1 connections to a host限制为大约 6。假设延迟为 100 毫秒，则已发布的 Sprite 中的大约 60 张图像至少需要一整秒才能下载(可能更多，因为需要生成和解析 HTTP 请求和答案)。

由于 sprite 图像的大小与单个 sprite 的大小大致相同，并且图像处理速度非常快(我估计所有 60 张图像在一起的时间远低于 <100 毫秒)，使用 sprite 可为亚马逊节省大约 900 毫秒的加载时间，这是一个显着的影响 - 这是理论上的结果，没有考虑到必须服务 60 倍于其他方式的请求数量的巨大开销。

总而言之，使用 sprites 通过 HTTP/1 制作 Logo 和小图像。

HTTP/2 的设计使得不再需要解决方法。最重要的是，可以通过同一个 TCP 连接同时处理多个请求。此外， header 压缩旨在压缩冗余 header ，例如 User-Agent 或 Accept。