我们都知道CSS sprite图像可以很好地减少请求的数量等，但是如果有多个元素使用一个大图像作为背景，浏览器渲染页面的性能又如何呢？
4个回答
6
在配备旧版浏览器（如IE6 / IE7）的较慢机器上，如果您在一页上多次使用非常大的图像，则可能会注意到显着的性能下降。当您为:hover状态使用sprites时，情况会更加严重。
您必须控制自己对将所有sprites推到一个巨大的图像的冲动 - 想想哪些元素是网站/ Web应用程序UI的一部分，并将它们放入一个sprite文件中（这些将始终显示，而浏览）。然后尝试将其余的sprites分组到特定于网站部分的图像中，并根据需要使用它们。缺点是稍微延长加载时间（额外的HTTP请求），但在查看/滚动页面时，用户体验会大大提高。
您必须控制自己对将所有sprites推到一个巨大的图像的冲动 - 想想哪些元素是网站/ Web应用程序UI的一部分，并将它们放入一个sprite文件中（这些将始终显示，而浏览）。然后尝试将其余的sprites分组到特定于网站部分的图像中，并根据需要使用它们。缺点是稍微延长加载时间（额外的HTTP请求），但在查看/滚动页面时，用户体验会大大提高。
- wojciechgabrys.com
1
你需要平衡一下。如果你要谈论一个包含1000个精灵的图像，那么CSS文件会非常大。此外，在同一页中使用所有这些精灵的可能性非常小。
- cherouvim
0
从我们的YouTube经验来看，这方面没有大问题。
希望浏览器将图像缓存在内存中，然后在需要该图像的任何地方使用它来呈现输出。
- User
0
通过将图像合并成一个或多个组合精灵，并使用CSS在网页中选择性地显示精灵的部分，您可以节省大量的HTTP请求。现在，主要浏览器已经发展到支持CSS背景和定位的程度，更多的站点正在采用这种性能技术。事实上，一些最繁忙的网站使用CSS精灵来保存HTTP请求。
拥有数百万用户的雅虎和AOL尽其所能改善用户体验。AOL.com和Yahoo.com都使用CSS精灵来为其复杂的界面节省大量的HTTP请求。两个站点都使用CSS精灵来选择性地显示其服务目录中的图标，而雅虎还在其他地方使用精灵。
CSS精灵的另一个好处是，即使在图像之间添加空白，合并后的图像文件大小通常也比单独的图像小。精灵较小的大小是由于单独的图像需要多个颜色表和格式化信息的开销较大。为了最大化可访问性和可用性，最好将CSS精灵用于图标或装饰效果。
- Iralda Mitro
1
4您没有回答问题。这个问题是关于浏览器渲染性能，而不是带宽或HTTP请求的。 - Michael Myers
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接