guardian/frontend — pull request #1607 by phamann (2013-09-17 09:00:33+00:00)
Title: CSS storage [DO NOT MERGE]

As discussed in thread #1168, this is a simple (proof-of-concept) asynchronous CSS loader that caches the response in localStorage for inline access on subsequent requests (which takes original inspiration from best practices by [Google and Bing](http://www.stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/)) .

This is an attempt to reduce the second reflow we have as a result of placing the global CSS in the foot of the page for performance reasons.

**Please review and give feedback.**

### Notes:
- Only supported by *modern browsers*, everyone else gets a fallback link element in the foot.
- Stores CSS against the MD5 key, therefore deploys with new CSS will invalidate the cache. Potential to be useless if users jump between servers that have different CSS versions.
- Based on these [perf tests](http://jsperf.com/basket-js-versus-browser-cache/2) the browser cache is always *slightly* faster than localStorage I/O reads, but we gain the speed back by doing this inline in the

rather than the foot of page, and prevent second reflow.
- This can only be benchmarked properly in PROD using the visual timeline tools in WPT.
- Should it go behind a switch so we can benchmark more easily?

![Performance boost](https://i.chzbgr.com/maxW500/5047993600/hAD868BAF/)