CSS - 图片精灵过度使用

Question

我最近开始使用图片精灵，它们对于减少http请求非常好。有没有一个地方变成不好的做法？

我特别想知道需要添加很多额外的标记来支持它们。例如，使用它们作为列表项目符号点，我必须添加两个或三个额外的跨度，以获得所有的东西alligned等。

这也是恼人的一点，你不能使用重复的图像，所以总是有折腾之间一个大图像作为精灵的一部分或者一个微小的1像素图像，用于重复下载。

我真的找对这里列出的两种情况+使用精灵任何其他一般性考虑/指导意见。

Answer 1

编写两个简单的测试页面，在一个上使用精灵，而不在另一个上使用精灵。使用像http://www.webpagetest.org/这样的工具来测量几种不同浏览器的性能。一旦你有数据，你可以做出决定。

Answer 2

我会通过相关的元素，如导航和内容相关的精灵精灵划分，这样你就可以从精灵中受益，并保持一定的逻辑顺序在你的代码。不要忘记，除非您正在开发Google规模的项目，否则可读性和可理解的代码应该是优先考虑的事情（特别是对于CSS，它会变得非常混乱）。

Answer 3

它们通常会导致移动设备出现性能问题。我不是100％确定为什么（从未真正深入到这个问题），但我假设这是因为移动webkit正在为页面上的每个实例加载一个相对较大的图像的新副本到内存中。由于移动设备通常只有非常少量的RAM，因此可能会导致页面速度变慢。

我在同一时间在一个页面上的大约300“图标”精灵时之前遇到了这个问题，每个从包含大约50个不同的图标的精灵形象拉动。回到每个图像一个图标（或2-3个悬停状态）的“正常”方法解决了这个特定页面上的性能问题。

此外，许多浏览器（手机和其他）通常不会100％的尊重精灵，当你稍微调整页面内容的剪辑（例如，使用“放大/缩小”关于浏览器本身）。您经常会看到您想要使用的精灵旁边的精灵小部分。

至于你的子弹例如，你不应该在任何时候需要一个以上的额外DIV/SPAN。您可以在li上设置margin-left，并将其“bullet div”放置在其创建的空白空间中。

话虽这么说，我用精灵所有的时间，因为他们是方便，只知道他们的几个问题。一般来说，我有sprites.png,sprites_h.png和sprites_v.png水平和垂直重复件。