0

浏览器如何智能地实现“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;}

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

4

2 回答 2

1

这种技术称为CSS Sprites，它用于减少您的 http 请求，因此您的页面加载速度更快。

解释 ：

网站中使用的所有图像都放置在一个画布上，并且每个图像都使用background-position属性进行映射，这样，http请求就会减少，从而使您的网页加载速度更快。

例如，您有 10 个<img>标签调用 10 个不同的图像，因此浏览器需要 10 次请求 10 个不同的图像，从而增加 http 请求，如果所有这些图像都放在一个画布/图像（主要是透明的 png）上并且它刚刚加载一次，CSS 处理其余的..

当您在悬停按钮或其他东西时使用图像时，这非常有用，因为它已经加载，您在悬停时不会看到轻弹......

更多参考

于 2012-10-02T07:45:12.057 回答
0

我进一步研究了这一点，并且需要这种名为 CSS sprites 的 hack（以及其他 hacky 优化：data-urls 中的 base64 图像，CSS/Javascript 连接），因为 HTTP 1.1 使所有调用同步（源代码）。

目前（2012 年 10 月）这些类似 hack 可能适用于每页有数百个 HTTP 调用的大型网站，但HTTP 2.0 将在几年内推出（我假设）以支持更好的技术（例如异步调用）并希望这些不必要的黑客攻击。

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

于 2012-10-05T23:34:00.697 回答