Along with idea of responsive design, we have discovered, that there are many accompanying problems with it’s usage. One of them lays in small hardware resources hidden under the hood of mobile or other portable devices. HTML5, CSS3, new JavaScript features give programmers ability to do less work and write smaller amount of lines to do much more cool stuff… at the expense of the hardware resources, though.

This limitations urge programmers to find out not only how to optimise network transfer, but parsing process, as well. Even though today’s mobile phones’ CPUs are fairly strong (or at least seem to be), real speed of parsing and reindering of one page is not even comparable to the desktop colegues.

Browsers do great job to ease the process of saving hardware resources of the device, like they do not reinder hidden parts of the page unless it is displayed, do not load images unless they are displayed, parse JS functions bodies only after they are called; all this is not enought, though. Programmer is able to optimise the code even more. Especially JavaScript.

Google’s approach to lazy JS parsing

No wonder that Google, the greatest player of the internet, is the one who cares about that problem with the deepest interest. Their blog post displays one great idea, how to parse javascript in lazy manner. Loading javascript as one big comment and then remove the comment and  eval()  it is really interesting trick. However, along with problems of maintaining such code (is that only my editor not higlighting commented code?), it breaks old, very well known rule: eval is evil.

My approach to lazy JS parsing

One briliant feature of all today’s browsers is – cache. Yes, the cache of browser allows us to do things a way trickier (and our servers less loaded). And files once downloaded … yes, you guessed it: not downloaded the second time once requested twice.

Imagine commented javascript being downloaded. What is it? Simple plain text, right? Now imagine javascript file being downloaded using text/plain header. What is it? Simple plain text, too; right? And now imagine you request it once again, with text/javascript header. What is it now? No, it is not a plain text for now, it is javascript code! Not downloaded second time, but rather fetched from the cache and parsed. No evil()… sorry, eval(); plus easy maintenance.

The code

I am not of the best JS programmers, but this is what I got so far:

Please, feel free to send PRs and comments, I would like to see the code being as much clear and usable, as possible.

The usage

For now, the code contains three methods.

load()  allows you to load specified JS file on request, when you need it. You know that very well from thousands of JS loaders, I believe. But there is one important line different from all the other JS loaders. Javascript file is requested as plain text. This means no code is parsed. It is just purely loaded. This is what makes magic in the code.

parse()  method looks like common JS loader loading method. The trick is, that it requests browser to load specified JS file as text/javascript, so the browser will parse it. It is already stored in the cache (if .load() method was called previously), so it makes no new request.

parseLocal()  is just small bonus to make Google’s solution available to the world.

There is no need to create new instance of the object as all methods are the static ones. So it is just an static object.

The feature

I believe using this small piece of code, we are able to optimise our javascript code even more, allowing mobile browsers to load our pages even faster. New users, new customers, more money, but also more love to what we do. Enjoy and spread!

Code is fun, isn’t it?