Web Workers Use Case – Loading Data Files

I spent last week rebuilding the whole javascript framework we use at work (finally I had some time for it), because the current one is a little disaster (you know, every developer had written his own stuff in different files, too much DOM access etc.)

The point is we wanted to have autocompletion for airport selection without using AJAX, but prefetching a huge file containing the whole airport list (why? ummm, not my decision). Of course the airport file is huge (around 400KB, not gzipped), so before I came to the company the guys decided to load this file via AJAX request after “dom:loaded” but still was delaying too much the first user interaction.

My second try consisted in taking advantage of Web Workers:

• https://developer.mozilla.org/En/Using_web_workers
• http://dev.opera.com/articles/view/web-workers-rise-up
• http://www.html5rocks.com/tutorials/workers/basics

And it worked really well! Of course using as well an AJAX request as the fallbak for IE mostly. The major advantage is not the file transfer itself (since this should be ~ the same using a Worker object instance or an AJAX request or whatever other file loading alternative) but the time the Javascript engine consumes to treat the huge variable literal first assigment (in my case a really big Array of strings), where with a Worker gets done without blocking the execution of the rest of your javascript code.

I just did something like this:

Main javascript file

if(!!window.Worker) {
    var worker = new Worker('myWorker.js');
    worker.onmessage = success;
}

Worker file

if(!IE) {
    postMessage(hugeArray);
}

So the success method gets executed just after the Worker loaded the file with the airport list and had ready the hugeArray variable to be treated by my autocompleter functionality. The performance got considerably increased (in my case something like 10 times faster in FF and 3 times faster in Chrome 6).