Web workers to overcome the problem of running multiple scripts
Posted By : Sachin Arora | 25-Feb-2018
Javascript is designed to work in a single-threaded environment which means multiple scripts cannot be run at the same time. So, to overcome this problem web workers were introduced which will perform all the computational tasks without interrupting the user interface and run on different threads.
Web-workers allow long-running scripts that are not interrupted by scripts which response to user interactions like clicks, and allows long tasks to execute without getting the page unresponsive. Web workers are the scripts which are relatively heavy, runs in the background and are not intended to be used in large numbers. When a script is being executed inside a web-worker it is not able to access the web page window object (window.document) which means that web-workers don't have direct access to a web page and Dom API.
Web-workers are initialized with the URL of the javascript file and it contains the code that the web-worker will execute. This code will set the event listeners and communicates with the script.
Syntax:
var worker = new Worker('bigLoop.js');
If your application has multiple javascript files you can import tem by using the method importScripts() which takes flile name as argument.
Example:
importScripts("helper.js", "anotherHelper.js");
Once the web-worker gets spawned, communication between web-worker and its parent is done using method postMessage(), this method takes a string or json as argument depending upon the version of browser. This message passed by web-worker is accessed by using onMessage event.
Once the web-worker starts working it doesn't stops by itself but the page that started them can terminate these web-workers by calling terminate() method.
worker.terminate();
A terminated web worker no longer responds to the messages or perform any additional computations. You can't restart the web-worker instead can create a new one with same URL.
Example:
-
-
<html lang="en"> -
<head> -
<title>HTML5 Web Worker</title> -
<script type="text/javascript"> -
// Set up global variable -
var worker; -
-
function startWorker(){ -
// Initialize web worker -
worker = new Worker("worker.js"); -
-
// Run update function, when we get a message from worker -
worker.onmessage = update; -
-
// Tell worker to get started -
worker.postMessage("start"); -
} -
-
function update(event){ -
// Update the page with current message from worker -
document.getElementById("result").innerHTML = event.data; -
} -
-
function stopWorker(){ -
// Stop the worker -
worker.terminate(); -
} -
</script> -
</head> -
<body> -
<h1>Web Worker Demo</h1> -
<button onclick="startWorker();" type="button">Start web worker</button> -
<button type="button" onclick="stopWorker();">Stop web worker</button> -
<div id="result"> -
<!--Received messages will be inserted here--> -
</div> -
</body> -
</html>
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Sachin Arora
Sachin is ambitious and hardworking individual with broad skills,He have the capabilities to build captivating UI applications . One of his key strength is building a strong bond with the team in order to deliver the best results on time .