一个大图像而不是许多小图像效率更高.Facebook风格

所以我用firebug查看了facebook HTML,我偶然发现了这张图片 并得出结论,facebook使用这个大图像(带有棘手的图像定位代码)而不是许多小图像用于它的图形元素.这比存储许多小图像更有效吗？

任何人都可以提供任何关于为什么facebook会这样做的线索.

这些被称为CSS精灵,是的,它们更有效 - 用户只需下载一个文件,这减少了加载页面的HTTP请求数.有关详细信息,请参阅此页面.

这里解释了背后的理论:http://css-tricks.com/css-sprites/,这里也看一下,因为它强调了为什么你真的需要一个大图像.我也说所有文章都很有趣:)

亲性能观点的问题在于它似乎总是呈现"为什么"(性能),通常没有"如何",而从不"为什么不".

CSS Sprites 确实对性能产生了积极影响,原因在于其他海报已经详细介绍了.但是,它们确实有缺点:可维护性 ; 删除,更改,特别是调整图像大小变得更加困难 - 主要是因为需要对背景位置复杂的样式表进行更改以及精灵大小的每次更改或地图的形状.

我认为这是少数人的观点,但我坚信,在绝大多数情况下,可维护性问题应该超过性能问题.如果性能是必要的,那么继续,但要注意成本.

也就是说,性能影响是巨大的 - 特别是当你使用翻转并希望避免鼠标悬停在图像上时产生的效果,然后浏览器就会请求翻转.一旦您的要求稳定下来,将图像重构为精灵地图是合适的 - 特别是如果您的网站将面临繁忙的流量(当然,人们已经退出的大型示例 - Facebook,亚马逊,雅虎 - 都适合该配置文件).

在某些情况下,您可以使用它们,基本上没有成本.无论何时切割图像,使用单个图像和背景位置标签都可能更便宜.任何时候你都有一套标准的图标 - 特别是如果它们的尺寸统一并且不太可能改变.当然,任何时候表演真的很重要,而且你有预算来支付维修费用.

如果可能的话,使用工具并记录您对它的使用,以便任何必须维护您的精灵的人都知道它.http://csssprites.org/是我唯一详细研究的工具,但http://spriteme.org/看起来非常棒.

该技术被称为"css sprites".

看到:

在Web应用程序中使用CSS Sprites有什么好处？

css精灵的表现

CSS sprites如何加速网站的速度？