Google Chrome load image from cache slower than download

6
votes

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: enter image description here

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
1
google-chromecaching
BTW, my firefox works much better,and safari is the best. - ipoly
Today I make some test with smaller images which is about 800Kb and the same size(2000x3000)，and I switch images with css opacity instead of src. It's still very slow. At last,I use css display to switch images,it's looks better. So I think the problem is about the Chrome's graphic performance. - ipoly

1 Answers

0
votes

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.