CSS - 图像精灵过度使用
我最近开始使用图像精灵，它们对于减少 http 请求绝对非常有用。有没有什么时候它会成为不好的做法？
我特别想到必须添加大量额外标记来支持它们。例如，将它们用于列表项目符号点，我必须添加两个或三个额外的跨度以使所有内容对齐等。
还有一个恼人的点是您不能使用重复图像，因此总是在一张大图像之间进行折腾精灵的一部分或用于重复下载的微小 1 像素图像。
我真的在寻找关于这里概述的两种情况的意见以及使用精灵的任何其他一般注意事项/指南。
I have recently begun using image sprites and they are definately great for reducing http requests. Is there a point where it becomes bad practice?
Im thinking particularly where a lot of extra markup has to be added to support them. For example, using them for list bullet points, I have to add two or three extra spans to get everything alligned etc.
Theres also the annoying point that you cant use repeating images, so therfore there is always the toss up between one large image as part of sprite or a tiny 1 pixel image used for repeating downloaded on its own.
Im really looking for an opinion on the two situations outlined here + any other general considerations/guidelines for using sprites.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
它们通常会导致移动设备出现性能问题。我不是 100% 确定原因（从未真正深入研究过这个问题），但我假设这是因为移动 webkit 正在为页面上的每个实例将相对较大的图像的新副本加载到内存中。由于移动设备的 RAM 通常非常小，因此很快就会导致页面速度变慢。
我以前遇到过这个问题，当时页面上同时有大约 300 个“图标”精灵，每个精灵图像都包含大约 50 个不同的图标。回到每个图像一个图标（或悬停状态 2-3 个图标）的“正常”方法解决了该特定页面上的性能问题。
此外，当您稍微调整页面内容的大小（例如在浏览器本身上使用“放大/缩小”）时，许多浏览器（移动浏览器和其他浏览器）通常不会 100% 尊重精灵的裁剪。您经常会在您要使用的精灵旁边看到精灵的小片段。
至于您的项目符号示例，您不应需要超过一个额外的 div/span。您可以在
li上设置margin-left并将“bullet div”放置在它创建的空白区域中。话虽这么说，我一直使用精灵，因为它们很方便，只是要注意它们的一些问题。一般来说，我有
sprites.png、sprites_h.png和sprites_v.png用于水平和垂直重复的片段。They can often cause performance issues on mobile devices. I'm not 100% certain why (never really dived into the problem), but I'm assuming it's because the mobile webkit is loading a new copy of a relatively large image into memory for every instance of it on the page. Since mobile devices often have very small amounts of RAM, it can quickly cause the page to slow down.
I've run into this issue before when having about 300 "icon" sprites on a page at one time, each pulling from a sprite image that contained about 50 different icons. Going back to "normal" methods of one icon per image (or 2-3 for hover states) solved performance issues on this particular page.
Also, many browsers (mobile and otherwise) will often not 100% respect the clipping of sprites when you slightly resize the page content (e.g. using "Zoom In/Out" on the browser itself). You'll often see little pieces of the sprite next to the one you want to use.
As for your bullet example, you shouldn't ever need more than one extra div/span. You would set a
margin-lefton theliand position your "bullet div" in the empty space it creates.That being said, I use sprites all the time because they're convenient, just be aware of a few issues with them. Generally, I have
sprites.png,sprites_h.pngandsprites_v.pngfor horizontally and vertically repeating pieces.编写两个简单的测试页，在其中一个上使用精灵，而在另一个上不使用精灵。使用诸如 http://www.webpagetest.org/ 之类的工具来测量几种不同浏览器中的性能。一旦获得数据，您就可以做出决策。
Write two simple test pages, use sprites on one, and not on the other. Use a tool like http://www.webpagetest.org/ to measure the performance in a few different browsers. Once you have data, you can make decisions.
我会将精灵按相关元素划分，例如导航和与内容相关的精灵，这样您就可以从精灵中受益并在代码中保持逻辑顺序。不要忘记，可读且可理解的代码应该是一个优先事项（特别是 CSS，它可能会变得非常混乱），除非您正在开发 Google 规模的项目。
I would divide sprites by related elements, like navigation and content-related sprites, so you can benefit from sprites and keep a logical order in your code. Don't forget that readable and understandable code should be a priority (particularly with CSS, it can get very messy) unless you're working on a Google-scale project.