Comments (21)
  • Add a Comment
  • Edit
  • More Actions v
  • Quarantine this Entry

1 PeterYim commented Permalink

This is a very cool technique. now the binary src is stored as base64 and read directly by the browser. The performance on your working example clearly shows the advantage of doing it this way. Thanks for sharing, Bob!

2 bobleah commented Permalink

@ Peter - Thanks Peter! It would be interesting to create a full web page with its artifacts stored in localStorage and measure the performance differences.

3 MattBerglund commented Permalink

Nice Bob! Interesting to think about all the applications for localStorage...

4 bobleah commented Permalink

@ Matt - Thanks! This technique does open up a number of interesting possibilities!

5 David_Salinas commented Permalink

To quote Joker from Batman (1989), "Where does he get those wonderful toys? " : ) <div>&nbsp;</div> Seriously, you keep finding all of these great nuggests of tricks. <br /> As you know, the dW site uses Akamai to help the site with regional caching to mainly help the response time for our local site audience. <div>&nbsp;</div> It would be interesting to see how this method could be applied strategically at dW to improve our response times. <br /> Specifically, what kind of delta response time improvements will we see with both akamai and local storage. <div>&nbsp;</div> Want to test it out? <br />

6 bobleah commented Permalink

@ David - this would be interesting... I would like to see statically localStorage compared to Akamai. Let's test it!

7 CJS commented Permalink

Coolness, as always, enjoyed reading this one......

8 bobleah commented Permalink

Thanks CJ! I bet we can do something really creative with this technique! :-)

9 Shin-LaC commented Permalink

Excuse me, but isn't this exactly what the browser cache does automatically? Your example works poorly because the server explicitly tells the user agent not to use the cache for that image: <div>&nbsp;</div> $ curl -I 'https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/hero.jpg' <br /> [...] <br /> Expires: Thu, 01 Dec 1994 16:00:00 GMT <br /> Cache-Control: public, must-revalidate, max-age=5, no-cache=set-cookie <br /> [...] <div>&nbsp;</div> If you allowed caching, like servers usually do, then I doubt we would see any difference in performance, because the browser would be loading the image from disk in both cases.

10 bobleah commented Permalink

@ Shin-La - You are absolutely correct in pointing out that once an artifact is in cache, regardless of the implementation of how it was cached, will yield similar performance results. The key difference between between localStorage cached artifacts vs. browser cached artifacts is in the level of intelligence, fidelity, and most important, the point of control of the cache itself, I.E. application vs. client. I have made an update to this blog entry to ensure this point is clear. Thanks!