谷歌Chrome从缓存加载图像比下载慢

Question

我正在建立一个网络应用程序来浏览本地服务器上的大照片。

奇怪的是，Chrome加载图片表单缓存的成本太高，甚至远远超过从本地服务器下载。

每张照片约为5Mb，Chome下载费用约为200毫秒，但距离缓存约400毫秒。

以下是截图：

我的环境是Mac OSX 10.8.4，我已经在PC上测试了它 - 它的成本约为700毫秒。

这是test on jsfiddle。

我无法在网络上找到这样大小的图像，因此您可能需要使用fiddle2或Charies将这些图像映射到您自己的本地图像。并重写标题以使Chrome缓存它们：

Expires:Wed, 17 Jul 2013 01:50:08 GMT
Cache-Control:max-age=604800
Connection:keep-alive
Date:Wed, 10 Jul 2013 07:33:51 GMT
Last-Modified:Wed, 10 Jul 2013 01:13:26 GMT

Answer 1

不是非常有用，但我对此问题的解决方案是将图像编码为数据URI。复制图像（正如我正在做的那样）或从缓存中拉出大约10-50ms。

如果您通过AJAX加载图像，那么您必须注意CORS问题，但如果您在服务器端加载它们，您只需要弄清楚是否可以在不创建页面的情况下内联它们负担太长了。