I'm trying to use script caching to store scripts in localStorage. In this case, I'm trying Basket.js, which is created by Addy Osmani and others. The performance is awesome for the cases it works with but the problem is it's not working like I expect but, to be honest, maybe it's working and I'm not understanding the basic principle behind script caching. So let me describe how I use it:
First, I set the markup:
Then, I enclose all my scripts in the following block:
When I load my test page, all works fine, except for the fact it does when I refresh the document. Once it's cached... flash! It works really well, but my problem is the script caching itself. I always have to refresh the document to see its effects.
Honestly, I thought script caching stores the scripts in localStorage and also executes them, so you get the best of both worlds. However, it doesn't seem like that.
Am I doing something wrong or is it any script caching model works like this? Always on the second run?
You are correct in saying that you "always have to refresh the document to see its effects". From my understanding caching only occurs after first load of a resource. Simply put basket.js will see that jquery is required and will cache it in localstorage. This is then used to load the script from the client and by doing so cut requests for resources to the server for jquery on subsequent loads. This speeds up page load time on repeat loads hence the faster response time on refresh.
Without loading the resource to the client initially basket.js cannot cache the script to localstorage.
A basic explanation on the mechanics of browser cacheing and its implementation can be found here .
That said, if you are looking to speed up load time of resources on initial load of a page I recommend using a Content Delivery Network(CDN) service.