CSS Sprites 浏览器渲染
我们都知道 CSS 精灵图像非常适合减少请求量等，但是浏览器使用大图像作为背景渲染包含多个元素的页面的性能又如何呢？
We all know that CSS sprite images are great to reduce the amount of requests and such, but what about the performance of the browser rendering the page with several elements using a big image as a background?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
在配备较旧浏览器（如 IE6/IE7）的速度较慢的计算机上，当您在一页上多次使用非常大的图像时，您会注意到性能显着下降。 当您使用精灵进行 :hover 状态时，情况会更加严重。
您必须克制将所有精灵推送到一张巨大图像的诱惑 - 考虑哪些元素是网站/网络应用程序 UI 的一部分，并将它们放入一个精灵文件中（这些元素将在浏览时始终显示）。 然后尝试将其余的精灵分组到特定于网站部分的图像中，并根据需要使用它们。 缺点是加载时间略有延长（额外的 HTTP 请求），但查看/滚动页面时的用户体验会更高。
on slower machines equipped with older browsers (like IE6/IE7) you can notice significant performance drop when you're using very big images many times on one page. It's even more severe, when you're using sprites for :hover states.
You have to moderate your temptation towards pushing all your sprites to one huge image - think about which elements are part of the website/webapp UI and put them into one sprite file (those will be displayed all the time, while browsing). Then try to group rest of the sprites into website section-specific images, and use them as needed. Downside is slightly extended load time (additional HTTP requests), but user experience while viewing/scrolling page will be much higher.
你需要平衡事情。 如果您谈论的是包含 1000 个精灵的图像，那么 CSS 将非常庞大。 此外，无论如何，您将在同一页面中使用所有这些精灵的可能性很小。
You need to balance things. If you are talking about an image which will include say 1000 sprites then the CSS will be huge. In addition there is a very thin chance that you'll be using all those sprites in the same page anyway.
从 YouTube 的经验来看，这没有什么大问题。
希望浏览器在内存中缓存图像，然后在需要该图像的地方使用它来渲染输出。
As we can judge from our YouTube experience, there are no big problem with that.
Hopefully, browser caches an image in memory and then uses it to render output wherever this image is needed.
您可以通过将图像合并为一个或多个复合精灵并使用 CSS 有选择地在网页中显示精灵的部分内容来节省大量 HTTP 请求。 现在主要的浏览器已经发展到足以支持 CSS 背景和定位，更多的网站正在采用这种性能技术。 事实上，网络上一些最繁忙的站点使用 CSS 精灵来保存 HTTP 请求。
雅虎拥有数百万用户！ 和 AOL 竭尽全力改善用户体验。 AOL.com 和 Yahoo.com 都使用 CSS sprites 来保存其复杂界面的大量 HTTP 请求。 这两个网站都使用 CSS 精灵有选择地显示其服务目录中的图标，而 Yahoo! 在其他地方也使用精灵。
CSS 精灵的另一个好处是，尽管在图像之间添加了空白，但组合图像的文件大小通常比单个图像更小。 精灵尺寸较小是因为减少了多个颜色表的开销以及单独图像所需的格式化信息。 为了最大限度地提高可访问性和可用性，CSS 精灵最适合用于图标或装饰效果。
You can save a significant amount of HTTP requests by consolidating your images into one or more composite sprites and using CSS to selectively display parts of the sprite within your web page. Now that the major browsers have evolved enough to support CSS backgrounds and positioning, more sites are adopting this performance technique. In fact, some of the busiest sites on the Web use CSS sprites to save HTTP requests.
With millions of users, Yahoo! and AOL do everything they can to improve the user experience. Both AOL.com and Yahoo.com use CSS sprites to save numerous HTTP requests for their intricate interfaces. Both sites use CSS sprites to selectively display icons within their directories of services, and Yahoo! uses sprites elsewhere as well.
Another benefit of CSS sprites is that the combined image is often smaller in file size than the individual images, despite adding whitespace between images. The smaller size of sprites is due to the reduced overhead of multiple color tables and formatting information required by separate images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.