css – 多个图像vs spritesheet

前端之家收集整理的这篇文章主要介绍了css – 多个图像vs spritesheet前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
“简单”的问题.

使用大型spritesheets作为网站元素比使用多个图像更好吗?

我的意思是,进行额外的CSS图像处理(背景定位大图像并裁剪它)可以补偿更少的HTTP图像请求吗?

解决方法

假设延迟为100毫秒,发布的精灵中的大约60个图像将至少花费一秒钟下载(可能更多,因为需要生成和解析HTTP请求和答案).

由于精灵图像的大小与各个精灵的大小相同,并且图像处理非常快(我估计所有60个图像一起远低于<100 ms),使用精灵可以节省大约900毫秒的加载时间,明显的影响 - 这在理论上是没有考虑到必须服务60倍的巨大开销,否则他们将要求的数量. 总之,通过HTTP / 1使用精灵用于徽标和小图像. HTTP / 2的设计使得不再需要解决方法.最重要的是,可以在同一TCP连接上同时提供多个请求.此外,标头压缩旨在压缩冗余标头,例如User-Agent或Accept.

猜你在找的CSS相关文章