JavaScript Web Workers - Responsive UI

Submitted by Avichal Badaya on Tue, 06/12/2012 - 7:47pm.
Avichal Badaya's picture

What is Web Worker ? < Wikipedia definition >

Web Worker is a JavaScript script, executed from an HTML page, that runs in the background, independently of other, user-interface scripts that may also have been executed from the same HTML page.

Why Web Workers ?
In the current world of dynamic User Interface, web developers are making heavy use of client side scripts to give users best look and feel. According to IBM, for good user experience, any JavaScript code should not take more than 50ms to run. But the JavaScript code runs in sequential passion so nothing much can be done to comply with the standards, unless we divide the work in different threads. And with the evolution of multi cores, it has become possible to share the work among different threads to improve the performance of applications. In such case, Web Workers is just the kind of tool we need. Conceptualized with the thought of running the heavy computations in background over different threads, Web Workers has become an important functionality of HTML5. It is efficient in using multi cores of client side processor using sub workers as well as in providing responsive user interface.

Where to use? < you must have figured out till now>
Creating rich user interfaces, pre fetching or caching data for later use, code syntax highlighting or other text formatting, spell checker, background I/O or polling of web service, processing large array or JSON responses and in a lot of other scenarios where we need to do heavy computation.

How to use? < its easy >
1. Put your javascript function in worker.js (can be done using inline javascript function too)
2. Create worker object - var worker = new Worker ("worker.js");
3. Initiate worker by sending message to it -worker.postMessage("hello"); (message could be Json object too)
4. Receive message from worker - worker.onmessage = function (event) {
var message = "Worker says " + event.data;};
5. terminate the worker -worker.terminate();
6. Handle error if any- worker.onerror = function(error) { do something};

To know more about Web Workers, check your browsers compatibility and see how it is performing, visit my page :-



Zhou Zhou's picture
Zhou Zhou Says:
Wed, 06/13/2012 - 3:03pm

Hi Avichal, thanks for the great post! I have been using head.js to load multiple javascripts asynchronously (i.e. concurrently) in my projects. However that does not allow running scripts concurrently like Web Worker promises. I need to learn more about using Web Worker because I don't understand how it can execute interdependent javascript files concurrently. But I'm surprised to see Web Worker, although still under development, is already available in my Chrome browser 19.0.1084.56.

I will be glad to explore it more with you. I think it's a good idea if we will have a tutorial/workshop in the Tuesday D&R meeting. Let me know what you think. Thanks!


Avichal Badaya's picture
Avichal Badaya Says:
Wed, 06/13/2012 - 8:17pm

Hi Zhou,Thank you for your comment. I would be glad to discuss more about web workers. And yes, we can totally have an 15-20 mins workshop over its usage . Web Workers not that complicated and they can do wonders if used appropriately.


Hui Soo Chae's picture
Hui Soo Chae Says:
Wed, 06/13/2012 - 1:08am

Avichal, thanks for sharing this. Can you touch base with Yudan and Zhou about Web Workers? It seems fairly important for NLT. You might also want to talk with Janice about Responsive UI. I know she has some experience with this.


Avichal Badaya's picture
Avichal Badaya Says:
Wed, 06/13/2012 - 8:12pm

Hui Soo, thank you the directions. I will surely get in touch with Yudan , Zhou and Janice and explore the possibilities of usage of Web Workers in ongoing projects.