JavaScript has an important limitation: all its
execution process remains inside a unique thread.
Web workers are supported by all major browsers except IE.
This JavaScript limitation implies that a long-running process
will freeze the main window. We often say that we’re blocking the “UI Thread”.
This is the main thread in charge of handling all the visual elements and
associated tasks: drawing, refreshing, user inputs events, etc.
When executing scripts in an HTML page, the page becomes
unresponsive until the script is finished.
We all know the bad consequences of overloading this thread: the
page freezes and the user can’t interact with your application any more. The
user experience is then, of course, very unpleasant.
To avoid the above issues and to provide user with a pleasant
experience we can use Web workers.
What is Web workers?
A web worker is a JavaScript that runs in the background, without affecting the performance of the page. ( You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background. )
A web worker is a JavaScript that runs in the background, without affecting the performance of the page. ( You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background. )
The web workers are background workers that run scripts in
parallel to their main page. The Web Worker itself is independent of any user
interface scripts.
There are two types of web workers available: Dedicated
Workers and Shared Workers.
Dedicated workers are linked to their creator. They
are also a bit simpler to create and work with than shared
workers.
Shared workers allow any script from the same
origin/domain to obtain a reference to the worker and communicate with it.
Dedicated web workers are supported in Firefox 3.5+, Chrome 5+,
and Safari 5+.
Shared web workers are supported in Chrome 5.0+ and Safari 5.0+.
Dedicated web workers
To create a dedicated web worker, you simply create a new instance
of the Worker object passing in a string that specifies the location of the
JavaScript file for the worker code. The following is an example of creating a
dedicated worker instance:
var aWorker = new Worker("dedicated.js");
Shared Web workers
Shared web workers provide a way for any window, from the same
origin/domain, to share the use of a
worker thread.
var aSharedWorker = new SharedWorker("Shared.js");
The first thing to do in order to use the Web Workers API is to
create the worker and pass it an execution script URL. Here is an example for
that.
var worker = new Worker('worker.js');
Web workers interact with the document via message passing.
Those messages can be formed with normal strings or JSON objects.
To send a message to the worker, the postMessage method of the
worker object is used as shown below
worker.postMessage("Hi");
Webworker communicates with server using the method called
onmessage.
worker.onmessage(event){
alert(event.data);}
Web workers are supported by all major browsers except IE.
Be aware that the worker will live until you kill it.
Since they aren’t automatically garbage collected, it’s up to you
to control their states. And keep in mind that instantiating a worker will cost
some memory, and don’t neglect the cold start time. To stop a worker, there are
2 possible solutions:
*from the main calling page by calling the terminate() command.
*from the worker itself via the close() command.
