CSS - 单个图像文件与多个文件的优点 [英] CSS - Advantages of single image file vs multiple files
问题描述
我注意到，现在有很多网站，所有的图像在单个文件中，然后使用background-position来抵消显示在屏幕上的矩形。
I have noticed that alot of sites now, have all of their images in single files are then use background-position to offset the rectangle which is shown on the screen.
这是出于性能原因吗？如果是为什么？
Is this for performance reasons? If so why?
推荐答案
这是出于性能原因吗？如果是这样，为什么？
Is this for performance reasons? If so why?
-
单个请求意味着更少的服务器并发连接，可以加载。 TCP连接还会耗费服务器上的资源。
A single request means fewer concurrent connections to the server meaning other things can be loading. A TCP connection also costs resources on the server. Fewer total connections per user means more users can use it at once (if your performance is really connection bound).
单个sprite通常具有稍小的文件大小
A single sprite usually has a slightly smaller filesize than a bunch of single images, though this is not guaranteed and different formats vary.
对象状态都被立即加载，这意味着互动比if
Object states are all loaded at once meaning interaction is much more immediate than if you loaded another state on demand.
即使sprite的一部分没有在当前页面上使用，通过加载它（和浏览器缓存它） ，
Even if part of the sprite isn't used on the current page, by loading it (and the browser caching it), this would speed up the browsing experience for the user later on when the user views other pages.
Sprites don' t修复一切，你可能不应该太肛门，直到你预测交通繁忙，和/或你正在移动到一个CDN，根据你的请求收费。
Sprites don't fix everything and you probably shouldn't get too anal about it until you're forecasting heavy traffic and/or you're moving to a CDN where you're charged per request.
当然，如果你有一个16x16的图标在一个地方使用的整个负载，你可以快速提交它们。我发现有几个精灵的具体事情，如实际上使CSS更清洁太多。
Of course if you have a whole load of 16x16 icons that get used in a single place, you could sprite them up very quickly. I find having several sprites for specific things like that actually makes the CSS a lot cleaner too.
这篇关于CSS - 单个图像文件与多个文件的优点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
