谷歌浏览器从缓存中加载图片比下载慢 [英] Google Chrome load image from cache slower than download

问题描述

奇怪的是，Chrome加载图片表单缓存需要花费太多时间，甚至更多不仅仅是从本地服务器上下载。

每张照片大约5Mb，Chome不需要花费大约200ms，但是从缓存中花费大约400ms。

下面是截图：

我的环境是Mac OSX 10.8.4，我已经在pc上进行了测试 - 它的成本大约为700ms。

这里是 jsfiddle的测试。

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

 过期时间：2013年7月17日星期三01:50:08 GMT 
 Cache-Control：max-age = 604800 
连接：keep-alive 
日期：2013年7月10日星期三07:33:51 GMT 
 Last-Modified：2013年7月10日01:13:26 GMT 
  

解决方案

我解决这个问题的方法是将图像编码为数据URI。复制图片（像我一样）或从缓存中拉出大约10-50ms。

如果您通过AJAX加载图片，您必须注意CORS的担忧，但如果你加载服务器端，你只需要弄清楚你是否可以内联它们而不会让你的页面加载时间过长。

I'm buiding a web app to browse big photoes on local server.

Strange thing is that the Chrome load image form cache cost too much time,even much more than download from the local server.

Each photo is about 5Mb, Chome donwload it cost about 200ms, but cost about 400ms from the cache.

Below is a screenshot:

My environment is Mac OSX 10.8.4,and I have tested it on pc- it's cost about 700ms.

Here is a test on jsfiddle.

I can't find images with such size on the web, so you might need fiddle2 or Charies to map these images to your own local images. And rewrite the header to make Chrome to cache them:

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

解决方案

Not super useful, but my solution to this issue was to encode the images as data URI's. Duplicating the images (as I was doing) or pulling from the cache is about 10-50ms then.

If you're loading your images through AJAX you'll have to watch out for CORS concerns then, but if you're loading them server side you'll just need to figure out if you can inline them without making your page load take too long.

这篇关于谷歌浏览器从缓存中加载图片比下载慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！