Css背景图像破解与更大的图像(Css精灵)



浏览器如何智能地实现"css背景图像破解",这种技术是否适合用于较大的图像?

示例可以是此页面(例如,查看加号图标):
http://blueimp.github.com/jQuery-File-Upload/

加号图标实际上不是一个16x16px的图像,它更大(469px x 159px),实际上是这样的:http://blueimp.github.com/cdn/img/glyphicons-halflings.png
(或此:http://blueimp.github.com/cdn/img/glyphicons-halflings-white.png)

此图像用作图标模板,其中包含所有图标和css(http://blueimp.github.com/cdn/css/bootstrap.min.css)背景图像位置调整为仅显示图标模板的特定区域,方法如下:
.icon-plus{background-position:-408px -96px;}

如果图标更大,例如大小为150px x 150px的缩略图和由500个图像组成的图标模板,该怎么办?图标模板为37500px x 37500px。浏览器能以合理的方式处理这个问题吗?还是最好每次加载一个缩略图,每个缩略图都在自己的http进程中加载?

这项技术被称为CSS Sprites,它用于减少http请求,从而加快页面加载速度。

说明:

网站中使用的所有图像都放在一个画布上,并且与使用background-position属性映射每个图像相比,http请求会减少,从而使网页加载速度更快。

例如,假设您有10个<img>标签调用10个不同的图像,因此浏览器需要10次请求10个不同的图像,因此增加http请求,如果所有这些图像都放在一个canvas/image(大部分是透明的png),只加载一次CSS处理其余部分。

当你在悬停按钮或其他东西时使用图像时,这真的很有用,因为它已经加载了,你在悬停时不会看到轻弹…

更多参考

我进一步研究了这一点,因为HTTP1.1使所有调用同步(源),所以需要这种名为CSS精灵的破解(以及其他破解优化:数据URL中的base64图像、CSS/Javascript级联)。

目前(2012年10月),这些类似的黑客攻击可能适用于每页有数百个HTTP调用的大型网站,但HTTP2.0将在几年后推出(我认为),以支持更好的技术(例如异步调用),并有望使这些黑客攻击变得不必要。

黑客的问题是可维护性降低,当HTTP 2.0最终出现时,可能需要删除所有黑客,以恢复适当的可维护性和/或充分受益于HTTP 2.0的优势(如果有的话)。在等待HTTP 2.0时,请考虑例如SPDY(根据最近的新闻,这可能是HTTP 2.0的基础,但首先要仔细检查其他服务器模块是否会干扰SPDY,并遵循浏览器对SPDY的支持是如何增加的(如果它真的增加了)。或者,如果您的网站只有几个或几十个http调用,请仔细考虑这些黑客攻击是否有足够的好处来弥补可维护性降低的问题。

最新更新