与图像相比，大量的 dataURI

Question

我正在尝试将dataURIs 的使用与大量图像进行比较（出于性能考虑）。我所做的是设置两个测试：

1. Regular Images (WPT)
2. Base64 (WPT)

除了“如何”提供这些图像/资源之外，这两个页面完全相同。我已经针对每个（上面提到的 - WPT）运行了 WebPageTest，它看起来 base64 的平均加载时间要快得多——但常规视图的缓存视图更快。我已经实现了 HTML5 Boilerplate 的 .htaccess 以确保资源被正确压缩，但是正如你所看到的，我得到了 base64 的 F 用于不缓存静态资源（我不确定是否这是对还是错）。我最终要在这里弄清楚的是哪种方式更好（假设为了争论，一个页面上有那么多资源）。我知道的一些事情：

1. GET base64 请求很大
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）

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