我有一组大约 10 个 25x25 或更小的单调图标。哪个性能更好：
1) 使用数据 URI 将它们嵌入 CSS
2）将它们加载为字体（IcoMoon等）
加载为字体似乎不太有用，因为它会进行 http: 调用，除非我... 2b）自己嵌入字体文件。
上个月我在这个项目上一直在使用 IcoMoon，但是如果我需要对 SVG 进行更改并重新上传到应用程序，那就有点乏味了。在处理字体与图像时，CSS 也相当混乱。似乎我可以用 base64 编码 SVG 来避免头痛并完成它。
那么你会说什么是最好的方法？还是那些的替代品？我正在针对 Webkit、Mozilla 和 IE8+ 进行优化。
这取决于™。
似乎数据 URI 在移动设备上速度较慢，但小于 1KB 的图标在嵌入时性能更好。它还取决于每页使用图像的频率——数据 URI 显然必须在每次使用时解压缩，因此如果您多次使用它们，可能会影响页面性能。
不幸的是，似乎还没有人比较数据 URI 和 @font-face 图标字体的移动性能。理想情况下，做一些真实世界的 RUM 测试并发布你的发现 ^_^ 如果你这样做，请检查在 CSS 中嵌入图标字体作为 Base64 编码的数据 URI：D
最后，有一些Grunt 插件可以为您自动化工作流程，并且使用[data-icon]-style 嵌入图标字体减少 CSS 混乱（在 IE8+ 中支持 attr()）。
PS对不起，我也想要这个信息……</p>