与图像相比，大量的dataURI

Question

我正在尝试比较（性能）使用dataURIs与大量图像相比较。我所做的是设置两个测试：

1. Regular Images（WPT）
2. Base64（WPT）

两个页面完全相同，除了“如何”提供这些图像/资源。我对每个人运行了一个WebPageTest（上面提到的 - WPT），看起来base64的平均加载时间要快得多 - 但是常规视图的缓存视图更快。我已经实现了HTML5 Boilerplate的.htaccess以确保资源被正确压缩，但正如您所看到的，我为base64获取了 F 而没有缓存静态资源（我不是确定这是否正确）。我最终想要弄清楚的是哪个是更好的方法（假设让我们说在一个页面上有很多资源，为了论证）。我知道的一些事情：

1. 对base64的GET请求很大
2. 对于base64有1个资源，而常规有300个奇数（这里有更大的下降...... GET请求或资源数量）？关于常规资源需要记住的事情是，由于受到限制，只有很多资源可以并行加载 - 对于base64而言，你真的只能等到可以读取HTML - 所以没有什么是技术上加载而不是页面本身。

非常感谢任何帮助 - 谢谢！

Answer 1

为了进行比较，我认为你需要在多个主机名之间分割图像进行测试。

另一种选择是将图像精灵化为逻辑集。

如果您要沿着BASE64路线走下去，那么您可能需要找到一种方法将它们缓存在客户端上。

如果这些是您计划使用的图像，那么它们就有足够的优化空间，例如：http://yhmags.com/profile-test/img_scaled15/interior-flooring.jpg

我将其转换为PNG并通过ImageOptim运行，它以802字节的形式出现（对于JPG为1.7KB）

我会优化图像，然后重新运行测试，包括具有多个主机名的测试。