谷歌浏览器从缓存加载图像比下载慢答案

【问题标题】：Google Chrome load image from cache slower than download谷歌浏览器从缓存加载图像比下载慢
【发布时间】：2013-07-08 09:57:26
【问题描述】：

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

奇怪的是，Chrome 加载图片表单缓存的时间太长了，甚至比从本地服务器下载还要多。

每张照片大约 5Mb，Chome 下载大约需要 200ms，但从缓存中需要大约 400ms。

下面是截图：

我的环境是 Mac OSX 10.8.4，我在 pc 上测试过，耗时大约 700ms。

这是test on jsfiddle。

我在网络上找不到这样大小的图像，因此您可能需要 fiddle2 或 Charies 将这些图像映射到您自己的本地图像。并重写 header 让 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

【问题讨论】：

顺便说一句，我的 Firefox 效果更好，而 safari 是最好的。
今天我用800Kb左右的小图片做一些测试，同样大小（2000x3000），我用css不透明度而不是src切换图片。它仍然很慢。最后，我使用css显示切换图像，看起来更好。所以我认为问题在于 Chrome 的图形性能。

标签： google-chrome caching

【解决方案1】：

不是很有用，但我对这个问题的解决方案是将图像编码为数据 URI。复制图像（正如我所做的那样）或从缓存中提取图像大约需要 10-50 毫秒。

如果您通过 AJAX 加载图像，则必须注意 CORS 问题，但如果您在服务器端加载它们，您只需要确定是否可以在不创建页面的情况下内联它们加载时间过长。

【讨论】：