-->

是像精灵实际上比单独的图像更有效?(Are image sprites actually more

2019-07-31 03:03发布

大约2年前,因为我看到的网站,如苹果和Facebook使用他们在其网站上,我开始使用像精灵。

如果你下载一个60KB的图像,而不是三个20KB的图像 ,但是毫无疑问, 加载网页速度更快 ,我最近被告知,精灵,尽管装载更快,实际上有更多的内存消耗在客户端。

在我眼里:

  1. 精灵是在加载速度更快,使用更少的带宽
  2. 从一个开发者来看,他们更易于维护,因为所有图形都在同一个地方

然而,在我的同事们的眼睛:

  1. 每个精灵在网页中引用时,图像在内存中,这反过来会减慢浏览器的客户端创建
  2. 在加载速度上的差异不足以证明浏览器的内存使用增加
  3. 互联网被设计在小数据包传输,因此加载较小的图像,是更好然后加载较大的

这使我要问的问题,是精灵实际上是值得使用或者是我的同事找错了树?

Answer 1:

使用图像不止在一个页面一次,并不意味着存在于它被使用每一个地方的形象的一个副本。

如果那样,像一个页面此演示小提琴将使用约700 GB的内存。 事实并非如此。


加载一个图像总是比加载多个图像更快。 降低请求数量优化网站的性能时,是很重要的。 互联网是设计用于传输小包装,却只让加载多个小图片小于它可能已经影响。



Answer 2:

它们的值取决于使用环境。 对于设备我不再理会,为了节省客户端的处理开销。

它也可以依赖于所使用,以及是否需要透明的形象,和什么样的透明度。 我读了关于移动网络的电池寿命是如何受到各种图像的纸(临客跟随!) - PNG图像有显着性的渲染开销相比,说的JPG。

另一个考虑是用于在页面上什么图像,而且他们使用什么关闭页面。 我曾经编写了一个只用一个形象的所有精灵在页面上一个大型网站的模板,加载开销很小了。 网站的LOGO在前景很好拟合,这是罚款,直至人们开始在Facebook上分享的网站,我们有充分的小图标,按钮状态等显示为链接缩略图的选择。



Answer 3:

使用精灵占用更多的内存。 想想看,你的精灵是由40帧。 而且,即使只需要一次要显示他们极少数的,浏览器仍然需要整个精灵解码,并保持它在内存中。

话说回来,这真的取决于上下文。 如果您使用子画面按钮图标它们总是看到,内存使用情况是不从具有多个不同的图像。



文章来源: Are image sprites actually more efficient than separate images?