Optimising delivery with dynamic deferred scripts and localStorage caching

[Shikkediel]

I’ve written a small script to load jQuery async and dynamically add all other scripts as deferred links :

http://pastebin.com/u5igZu4k

It also has a fallback for when the CDN gives an error but that’s a sidenote. This works well but the disadvantage is that the created links are never cached. So I thought I’d store the JS in localStorage for that.

Having read up on security issues on this (it seems safe unless the site has a cross site scripting problem to begin with and at that point it’s rather trivial), I decided to use new Function()() instead of eval() to run the JS from localStorage where the content of the script would be saved as a string using Ajax.

So for returning visitors and caching purposes that string is retrieved from storage and then executed…

My question – does it make any sense to JSON.parse that string nonetheless? Will that add any security?

So instead of this :

new Function(retrievedstoragestring)();

It would be :

var runit = JSON.parse(JSON.stringify(retrievedstoragestring));

new Function(runit)();

It seems there’s a need to JSON.stringify the retrieved script again first. Although it would be a string already, JSON cannot start with a parenthesis and the stored script is an anonymous function :

(function() { ... }();

Thanks in advance for any insight.

[Shikkediel]

It’s a nice little basic script by the way, if I may so so. It avoids the issues with IE9 not executingdefer well by checking for async support and only making deferred links for those browsers. This will exclude IE9 which will be loaded asynchronously through event listeners.

http://caniuse.com/#feat=script-defer

http://caniuse.com/#feat=script-async

[Shikkediel]

Or other general thoughts on the subject…

Seems like a good move to use strict mode on the retrieved material in any case by the way :

new Function('"use strict"; ' + runit)();

Lol, made me find an incorrectly declared variable that became global in one of my scripts…

[Shikkediel]

Using JSON.parse does seem wise. Been reading a lot about it. It’s all regular scripts for functionality and no sensitive data of course. Always a lot to learn from what jQuery does or has done.

This will exclude IE9 which will be loaded asynchronously through event listeners.

Synchronously that should say. It’s for scripts that have dependencies and could be tweaked when not.

Still much interested to hear your thoughts on the subject in general!

[Shikkediel]

This is coming along nicely. :-)

I’m doing a last modified and size check on the scripts so that the visitor always gets the latest version. Something regular cache can’t do.

B-)

Because of loading async, I’m no longer using what has always been ultimately handy :

$(document).ready(function() {});

That’ll actually get ignored now but I’ve noticed it gets triggered quite a bit later than self-invoking functions which I’m now using instead. Those will get executed as early as possible with the defer attribute in place.

Looks like when deferred dynamic links are created, using a doc ready wrapper might fire after window onload. So that event won’t be “heard” before the script is executed and any references inside it won’t trigger.

In case the progress of parsing is needed after all, there’s always document.readyState although interactive seems buggy on several platforms.

Apparently localStorage can only be accessed synchronously (still reading up on the whole main thread thing) so only a single small file is pulled out at first to see if any files were stored already. Other retrieval of data, updating and saving to it is postponed as much as possible to not interfere with document parsing.

Just posting at the lack of blog, I guess. :-D

[Shikkediel]

Here’s the first draft, if any of you brainiacs are up for a code review :

http://ataredo.com/resource/entail.js

Still working on the feature test part (that’s a bonus) and making it a site-wide implementation.

Freakin’ Android 2.3 never wants to play nice. Seems you can’t reuse a window. global variable for some reason so I had to create another for feature testing…

Edit – left that out, easier and better for overview to make it a separate file.

[Author]

Posts