Monday, March 28, 2011

JSL - Painless JavaScript Optimization

I've been experimenting with JSL, the JavaScript Loader and really been liking it. It allows to turn:

<script type='text/javascript' src='foo.js'></script>
<script type='text/javascript' src='bar.js'></script>
<script type='text/javascript' src='baz.js'></script>
<script type='text/javascript' src='zoop.js'></script>

into:

JSL.add("foo.js");
JSL.add("bar.js");
JSL.add("baz.js");
JSL.add("zoop.js");
JSL.load();

and now your JavaScript loads in parallel instead of in sequence. Watching the scripts load simultaneously in Firebug is just too cool.

On one hand, I like how simple the API of JSL is - there's just two method calls (load and add). But, I find it a little quirky: add, as the name suggests, adds a script to the queue of JavaScript files to load. Unless you happen to pass in a priority of -1, then add is equivalent to load. And load load executes the queue, unless you supply a path to a file, then it loads and adds just this one file, leaving the queue unprocessed.

Still, the loader seems to work well and is a breeze to use.

I also looked at headjs - but in the end, I liked the simplicity of JSL.

Do you have a favorite JavaScript loader? If so, please share.

No comments:

Post a Comment