CSS精灵浏览器呈现 [英] CSS Sprites browser rendering

问题描述

我们都知道，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?

推荐答案

您可以当你使用非常大的图像在一个页面上多次发现显著性能下降。它甚至更加严重，当你使用精灵为：悬停状态

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.

您有中度的诱惑，对推动所有的精灵一个巨大的图像 - 考虑哪些要素是网站/ web应用程序的用户界面的一部分，并把它们放到一个Sprite文件（这将显示所有的时间，同时浏览） 。然后尝试精灵组其余为网站的特定部分的图像，并根据需要使用它们。缺点是稍微延长加载时间（额外的HTTP请求），但用户体验，同时查看/滚动页面会高出很多。

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.

这篇关于CSS精灵浏览器呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！