Javascript is single threaded
The JavaScript code that you write will usually execute in a single thread. A thread is like a big todo list. Each statement that you write is added to the list as a task and the browser works its way through this list executing each task one at a time. The problem with a single-threaded architecture is that if a particular task takes a long time to complete everything else is held up until that task finishes. This is known as blocking. In the world of client-side JavaScript applications, using a single-threaded architecture can lead to your app becoming slow or even completely unresponsive.
A web worker is a JavaScript running in the background, without affecting the performance of the page.Web Workers provide a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface
Web workers Bring Threading to JavaScript
Web Workers allow you to do things like long-running scripts to handle computationally intensive tasks, but without blocking the UI or other scripts to handle user interactions.
Web Workers run in an isolated thread. As a result, the code that they execute needs to be contained in a separate file. But before we do that, the first thing to do is create a new Worker object in your main page. The constructor takes the name of the worker script
var worker = new Worker('mytask.js');
After creating the worker, start it by calling the postMessage() method:
/*to start the worker*/
To send some data from your main application to a web worker you call the postMessage()
worker.postMessage();
you now need to write some code in your worker script that will listen for, and process, messages coming from the main application. Inside your worker script you would setup an event listener for the message event.
/* File: respond.js */
// Setup an event listener that will handle messages sent to the worker.
self.addEventListener('message', function(e) {
// Send the message back.
self.postMessage('You said: ' + e.data);
}, false);
Terminating a Worker
Once you are done with a worker you can terminate it by calling the terminate() function on your worker object. To have a worker terminate itself you need to call the close() function on self.
// Terminate a worker from your application.
worker.terminate();
// Have a worker terminate itself.
self.close();
Limited Access
Due to the fact that your Web Workers run outside of the main application thread they do not have the same access to JavaScript features as your main application does. Your workers do not not have access to:
The DOM
The document object
The window object
The parent object
Example:
<html>
<head>
<script>
var worker = new Worker('Myworker.js');
worker.onmessage = function (event) {
alert("Completed " + event.data + "iterations" );
};
function sayHello(){
alert("Hello sir...." );
}
</script>
</head>
<body>
<input type="button" onclick="sayHello();" value="Say Hello"/>
</body>
</html>
Place the below code in Myworker.js
for (var i = 0; i <= 1000; i += 1){
var j = i;
}
postMessage(j);
After 1000 iterations "completed 1000 iterations" alert will come so without distrubing the other UI interactions this webworker can work in background.
so this concept of web workers are used to provide Multi threading to javscript.but tis will be work with modern browsers only
Posts
No comments:
Post a Comment