我正在开发一个需要加载大量图标的应用程序。目前，我正在使用将' 设置为正确 URL 的<img>标签。src这引发了很多请求。即使缓存设置正确，仍然有很多 HEAD 请求。
我正在寻找一种解决方案，它只会触发最少的请求（最好是 1 个）来接收所有需要的图标。但我不喜欢精灵的概念，因为在这个概念中更改/替换/添加图标更难。
还有其他解决方案吗？
例如，将所有图像base64编码到服务器上的一个文件，将它们发送到浏览器，用JavaScript拆分它们并将base64 src设置为img标签会变慢吗？
有没有人测试这个或不同的方法？
使用 Base64 数据 URI 在 CSS 中内联图像。
background-image: url('data:image/png;base64,.......');
您可以使用自定义 PHP/node.js/... 脚本或使用在线转换器（例如http://www.greywyvern.com/code/php/binary2base64 ）转换图像
或 https://www.useotools.com/image-to-base64
这会导致只发出一个 HTTP 请求（只有一个用于 CSS 文件），但您无法单独控制每个内联资源的缓存。您需要为 CSS 文件设置缓存 HTTP 标头。
您可以让您的服务器在每次请求 CSS 文件时对图标进行编码，这样您就无需在每次更改图标时手动重新转换它们。一些简单的转换缓存应该包含在服务器端。
就替代方案而言，为什么不尝试使用图标字体呢？这里有一些很好的免费的：
您可以使用 CSS sprite 自动动态创建CSS sprite
确保在您的客户端请求它们之前或在第一个客户端请求之前构建精灵并将它们保存在服务器上，因为如果您在每个请求上生成一个精灵表，则会增加很多不必要的开销。
这使您可以将图像作为单独的文件，并且只需在服务器上执行脚本来创建那些讨厌的精灵表，保持原件完好无损并且使更新它们变得轻而易举。（需要使用 imagemagick 库构建的 PHP）
注意：我不确定分发图像 CSS sprite 的效率如何。