Javascript CSS精灵有什么好的替代品吗？

我正在开发一个需要加载很多图标的应用程序。目前，我正在使用

设置为正确的URL。这引发了很多请求。即使缓存设置正确，仍然有大量的HEAD请求

我正在寻找一个解决方案，将触发只有最低限度的要求（最好是1）接收所有需要的图标。但是我不喜欢精灵的概念，因为在这个概念中很难更改/替换/添加图标

还有其他解决办法吗

例如，将所有图像base64编码到服务器上的一个文件中，发送到浏览器，使用JavaScript拆分它们，并将base64 src设置为img标记，这样做会很慢吗

有人测试过这种或不同的方法吗？
您可以使用

确保在客户机请求之前或在第一个客户机请求时构建精灵并将其保存在服务器上，因为如果在每个请求上生成精灵表，会增加许多不必要的开销

这使您可以将图像作为单独的文件，只需在服务器上执行一个脚本即可创建那些讨厌的sprite工作表，保留原始图像，并轻松更新它们。（需要使用imagemagick库构建PHP）

注意：我不确定CSS sprite在分发图像方面有多高效。
另一种选择是，为什么不试试图标字体呢？这里有一些很好的免费软件：

使用Base64数据URI在CSS中内联图像

background-image: url('data:image/png;base64,.......');

您可以使用自定义PHP/node.js/…脚本或使用在线转换器（如

这将导致只发出一个HTTP请求（仅针对CSS文件），但您无法单独控制每个内联资源的缓存。您需要为CSS文件设置缓存HTTP头

您可以让服务器对CSS文件的每个请求上的图标进行编码，这样您就不需要在每次更改图标时手动重新转换图标。服务器端应该包括一些用于转换的简单缓存。
但是CSS精灵是基于eaxact的原因制作的，“只有最少的请求（最好是1）”-这肯定比使用预渲染的精灵表要慢。如果你在这上面搜索Google，会有一些帖子。我相信保罗·爱尔兰写的。下面是另一个不错的例子，所以你想说base64编码所有图像，发送到浏览器，使用javascript分割（如果js被禁用）比创建一个sprite简单得多？谢谢你的回答。问题是我已经有了一组完美匹配的图标，所以在这种情况下这不是一个选项。然而+1您的意思是这不是一个选项，因为您不想将当前图标转换为图标字体（）：）实际上是：）我想让用户添加自己的图标保持简单。。如果您对以下内容感兴趣，可以使用web服务器索引：