Introduction

Web Workers are a part of the HTML5 specification - they enable the creation of background JavaScript threads for CPU intensive tasks, without blocking the UI or any scripts that handle user interaction.
This acts as a multi-threading feature and provides parallel execution.

Support Detection

The first step is to check if the browser supports the Web Worker API. If the browser support is present, there will be a Worker property on the global window object. If your browser doesn't support the Web Worker API, the Worker property will be undefined. Note that the Worker object has the W in upper case!

Parallel Job

The next step is to create the "Worker" script that is going to perform the CPU intensive tasks we want to run in a parallel thread. This script is saved in a separate .js file.

Manage the flow

The communication is initiated by passing relevant information in a message from the main script to the worker script using the postMessage method. The worker script responds to the "onmessage" event by fetching the required information from the event and performing the requested task. When the task has completed, the worker posts a message back to the main thread. This message can be a simple variable or a JSON object. The main thread reacts in a similar fashion by handling the onmessage event which was raised by the worker and using the output result as needed. During the time that the worker script was executing, user interaction and other tasks are not blocked and the user is able to interact with the application.
You also have the capability to terminate a worker from the main thread, if needed.
Do note that web workers only have access to a subset of JavaScript's features to support the concurrent execution.

Error handling

Of course, we never have any errors in our code ;-) But we do have to make provisions. If an error occurs while a worker is executing, the ErrorEvent is fired.

Sample

We will try a simple sample now, to take a look at the reality of the implementation. This article is admittedly contrived to provide a working scenario. You can extend the concepts to real-world scenarios involving CPU intensive operations.
In the sample, we have a slow process - the code implements a "do nothing" loop (which is purely to demonstrate the concept in this article) and after a delay, returns the user input and the time that the function completes execution.
We have a fast process - the code just returns the user input and the execution timestamp.
When I tried to run the sample, I entered a string in the userName "slow". Clicked on the slow button which led the delay loop to execute. I could, in the meantime, interact with the application, update the string in the input text box and click the second button. The second button also spawned a worker which returned almost instantly, displaying the updated input and the time.
At no point did the application block, pending for any of the threads to return.
Take a look at the code now:
Code: Worker JavaScript - named as myWorker.js
  1. /* myWorker.js */
  2. //only for demo purpose
  3. function ReallySlowCode(millis)
  4. {
  5. var date = new Date();
  6. var curDate =
  7. null;
  8. do {
  9. curDate = new Date();
  10. }
  11. while (curDate - date < millis);
  12. }
  13. function slowfunc(userName) {
  14. ReallySlowCode(5000);
  15. return userName +
  16. "-" + new Date();
  17. }
  18. function quickfunc(userName) {
  19. return
  20. userName + "-" + new Date();
  21. }
  22. /* The onmessage event listener
  23. responds to the event raised from the main script, invokes the appropriate
  24. function based on the data passed.
  25. */
  26. this.onmessage = function(event) {
  27. var data = event.data;
  28. switch (data.op) {
  29. case 'slow':
  30. postMessage(slowfunc(data.userName));
  31. break;
  32. case 'quick':
  33. postMessage(quickfunc(data.userName));
  34. break;
  35. default:
  36. postMessage("Wrong
  37. operation specified ");
  38. }
  39. };
Main: named as testww.html
  1. <!DOCTYPE html>
  2. <body>
  3. <table border="0">
  4. <tr>
  5. <td>Your
  6. Name</td>
  7. <td>
  8. <input type="text" id="userName"
  9. />
  10. </td>
  11. </tr>
  12. <tr>
  13. <td>Slow
  14. Process</td>
  15. <td>
  16. <input type="text" id="slowResult"
  17. size="100"/>
  18. </td>
  19. </tr>
  20. <tr>
  21. <td>Quick
  22. Process</td>
  23. <td>
  24. <input type="text" id="quickResult"
  25. size="100"/>
  26. </td>
  27. </tr>
  28. <tr>
  29. <td
  30. colwidth="2">
  31. <input type="button" id="slowButton" value="Run Long
  32. process" />
  33. <input type="button" id="quickButton" value="Run quick
  34. process" />
  35. </td>
  36. </tr>
  37. </table>
  38. <script>
  39. /* Check if Web Workers are supported
  40. */
  41. function getWebWorkerSupport() {
  42. return (typeof(Worker) !==
  43. "undefined") ? true:false;
  44. }
  45. if(getWebWorkerSupport()
  46. == true)
  47. {
  48. var userName,y,message;
  49. /* Create the new workers.
  50. each instance runs in parallel */
  51. slowWorker = new
  52. Worker("myWorker.js");
  53. quickWorker = new
  54. Worker("myWorker.js");
  55. /* Bind an event listener for the onmessage
  56. function for each of the workers. this will be invoked by the worker thread when
  57. the execution has completed.
  58. */
  59. slowWorker.onmessage = function (event)
  60. {
  61. document.getElementById("slowResult").value =
  62. event.data;
  63. };
  64. quickWorker.onmessage = function (event)
  65. {
  66. document.getElementById("quickResult").value = event.data;
  67. };
  68. /* Register events for buttons
  69. */
  70. document.getElementById("slowButton").onclick = function() {
  71. userName = document.getElementById("userName").value;
  72. message = {
  73. 'op'
  74. : 'slow',
  75. 'userName' :
  76. userName
  77. };
  78. slowWorker.postMessage(message);
  79. }
  80. document.getElementById("quickButton").onclick
  81. = function() {
  82. userName = document.getElementById("userName").value;
  83. message = {
  84. 'op'
  85. : 'quick',
  86. 'userName' :
  87. userName
  88. };
  89. quickWorker.postMessage(message);
  90. }
  91. }
  92. </script>
  93. </body>undefined</html>
Sample in Action - open testww.html in a compliant browser (the following results are on Firefox 5)
webworker1.jpg

Conclusion

Web Workers utilize a thread-like message passing mechanism to achieve parallelism. They keep the UI performant and responsive to users. No more "A script on this page is busy or has stopped responding..." errors!!
Happy Coding!