Overview
Web Workers defines an API that can be used for running scripts in background threads. In traditional browsers javascript was capable of running in a single thread, due to which it was difficult to run background tasks. Also the capabilities and performance of client side applications were limited. However, there are some asynchronous functions like "setTimeout" and "setInterval" which provide nice work around for running background tasks.
I have divided this blog into two parts. First one explains the single threaded model of traditional browsers and the second one explains how to use Web Workers. You can skip the first section, if you have good hold on javascript.
Single Threaded Model
The way javascript handles various asynchronous ajax calls or various timer functions, it makes us feel that javascript runs in multiple threads. Now, how does browser handle the UI events when it is executing a particular block of code, or how does browser handle the asynchronous timer and ajax calls when it just has a single thread for execution. The answer to all these questions lies in the way browser queues up various functions for execution.
Let us take an example of the following script
function init(){
//takes 5 ms to be executed
//mouseClickEvent occurs
// takes 5 ms
setInterval(timerTask,"10");
//takes 5 ms
}
function handleMouseClick(){
// takes 8 ms to be executed
}
function timerTask(){
//takes 2 ms to be executed
}
Figure below shows the execution of the above script. Please pay extra attention to this figure as it contains a lot of information
Let us say that at 0 ms init() function starts executing and during the execution of init() function, a mouse click event occurs at 5ms. Now, as the main thread is already executing the init() function and is capable of executing just a single block of code at a time, it queues up handleMouseClick() function next in the execution queue. At 10 ms init() function sets a timer which will execute every 10 ms. First execution of the timer task is scheduled at 20 ms, second at 30 ms and so on. The execution of init() function takes 15 ms and after its completion, handleMouseClick() being next in the queue starts executing i.e. starts executing at 15ms. Execution of handleMouseClick() function takes 8 ms i.e. it completes at 23 ms and as timerTask() function was scheduled to run at 20ms, timerTask() function gets queued up in execution queue and is executed after the handleMouseClick() completes. Since there is no other function present in the execution queue that need to be run, timerTask() function runs at its scheduled time i.e. 30 ms , 40 ms and so on.
Web Workers
Web Workers allows you to load your script dynamically and run it in background thread. Creating a worker is simple. All you have to do is, call the constructor and pass the URI of the script you want to execute as an argument. Workers are relatively heavy weight and are not intended to be used in large number.
// Creates a Web Worker
var worker = new Worker("worker.js");
Workers don't have access to the DOM i.e. you don't have direct access to the 'parent' page. However, Web Workers API do provide you with methods like "onmessage" and "postmessage" which let you communicate with the main thread.
- onmessage : method used for receiving messages sent from the worker, also can be used in worker for receiving messages sent from main thread.
- postmessage : method used for sending messages from worker to the main thread, also can be used in main thread for sending messages to worker.
Lets take an example and see how exactly these methods can be used for communicating through messages
Here is the main script that created a new worker. In worker's onmessage event handler, we log all the messages received from the worker, i.e. this event handler is called when postmessage() function is called from the worker. This script also sets a timer, which calls the sendMsgToWorker() function every 5 sec.
var worker = new Worker('worker.js');
worker.onmessage = function(e){
console.log(e.data);
}
function sendMsgToWorker(){
worker.postMessage("Sent Message From main ");
}
setInterval(sendMsgToWorker,"5000");
Lets have a look at "worker.js" script.
onmessage = function(event) {
var message = "In worker on message method :" + event.data;
postMessage(message);
};
function sendMsgToMain(){
postMessage("Sent Message From worker");
}
// Call sendMsgToMain method again after 5seconds
setInterval(sendMsgToMain,"5000");
When we load the page containing the main script, the logs shown on the browser console are as follows
In worker on message method : Sent Message From main
Sent Message From worker
In worker on message method : Sent Message From main
Sent Message From worker
In worker on message method : Sent Message From main
Sent Message From worker
............
In this example, the main thread starts a new thread and instantiates a timer which calls sendMsgToWorker() function every 5 seconds. sendMsgToWorker() function sends a message i.e. "Sent Message From main" to worker by calling postmessage function on worker object. The worker receives this message in the onmessage callback function(in "worker.js" script) which prefixes the message with "In worker on message method :" and sends it back to the main thread using postMessage() function of worker API. Also, worker thread instantiates a timer which calls sendMsgToMain() function every 5 seconds. sendMsgToMain() sends a message i.e. "Sent Message From worker" to the main thread using postmessage() function. Messages sent by calling postmessage in 'worker.js' are received by worker.onmessage callback function(in main script) and are then logged to the console.
So, now there are two threads that run forever. First one is the main thread that receives messages sent from worker and logs them to the console and also sends a message every 5 seconds to the worker. Second thread, is the worker thread which sends the received messages from the main thread, back to the main thread and also sends a message every 5 seconds.
At last I would like to mention the objects and functions that can be used inside worker
Functions that can be called from Web Workers are
- importScripts(): used to load external Javascript for use in the worker
- setTimeout() : and setInterval(): used for setting timer tasks
- close(): stops the worker immediately
Objects that are available in Web Workers are
- navigator
- location
- All javascript objects, like Array, Date, etc
- XMLHttpRequest
-
Average:
-
閱讀(630)
-
引用通告(0)
-
固定連結
評論 (0)