css – 图像精灵实际上比单独的图像更有效吗?

前端之家收集整理的这篇文章主要介绍了css – 图像精灵实际上比单独的图像更有效吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
大约在2年前,我开始使用图像精灵,因为我在网站上看到像苹果和Facebook这样的网站.

毫无疑问,如果您下载一个60kb的图像,而不是三个20kb的图像,加载页面会更快,但是最近我已经被告知,精灵,尽管加载更快,实际上在客户端更多的内存消耗.

在我眼里:

Sprite加载速度更快,带宽更少
>从开发人员的角度来看,它们更容易维护,因为所有的图形都在一个地方

但是,在我的同事眼里:

>每次在页面上引用精灵时,图像都会在内存中创建,这反过来会减慢客户端浏览器的速度
>加载速度的差异不足以证明浏览器的内存使用量增加
>互联网设计为以小数据包传输,因此加载较小的图像比装载较大的图像更好

这导致我问这个问题,精灵实际上是值得使用还是我的同事咆哮错误的树?

解决方法

页面中多次使用图像并不意味着每个使用该图像的图像都有一个副本.

如果是这样,像this demo fiddle这样的页面将使用大约7 GB的内存.没有

加载一个图像总是比加载多个图像快.减少请求数量在优化站点性能时非常重要.互联网设计用于传输小包装的事实只会使得加载几个小图像的影响小于可能的程度.

猜你在找的CSS相关文章