多个图像与spritesheet

Question

"简单"的问题.

使用大型spritesheets作为网站元素比使用多个图像更好吗？ 我的意思是,进行额外的CSS图像处理(背景定位大图像并裁剪它)可以补偿更少的HTTP图像请求吗？

Answer 1

的并发HTTP/1连接到主机的数目被限制到约6假设100ms的等待时间,在贴sprite的约60的图像将至少需要一个整体的第二下载(可能更多,因为HTTP请求和回答需要生成和解析).

由于精灵图像的大小与各个精灵大致相同,并且图像处理速度非常快(我估计所有60个图像一起远低于<100 ms),使用精灵可以节省大约900毫秒的加载时间,这是一个值得注意的问题.影响 - 这在理论上是没有考虑到必须服务60倍的巨大开销,否则他们将要求的数量.

总之,通过HTTP/1 使用精灵用于徽标和小图像.

HTTP/2的设计使得不再需要解决方法.最重要的是,可以在同一TCP连接上同时提供多个请求.此外,标头压缩旨在压缩冗余标头,如User-Agent或Accept.