Explanation of Web Worker in HTML - How to use Web Workers API
{tocify} $title={Table of Contents}
A web worker is a JavaScript running in the background without affecting the page's performance.
What is a Web Worker?
A Web Worker is a JavaScript feature that allows developers to run scripts in the background thread separate from the main thread of the web page.
This is useful for offloading CPU-intensive tasks from the main thread, which can improve the performance and responsiveness of web applications.
Web Workers provide a simple way to create new threads in a web application.
They run in their own global context, which means they don't have access to the same variables or functions as the main thread.
However, they can communicate with the main thread using message passing.
Web Workers are helpful for tasks such as data processing, image manipulation, and complex calculations.
They can also be used to load and parse large data sets or files in the background without blocking the main thread.
Most modern browsers, including Chrome, Firefox, Safari, and Edge, support Web Workers.
To use Web Workers, developers can create a new worker by calling the “Worker()” constructor and passing the URL of the script that should be run in the background.
The worker can then send and receive messages with the main thread using the “postMessage()” and “onmessage” methods, respectively.
Check Web Worker Support
Before making a web worker, review whether the user's browser supports it:
if (typeof(Worker) !== "undefined") {// Yes! Web worker support!// Some code.....} else {// Sorry! No Web Worker support..}{codeBox}
Create a Web Worker File
Now, let's make our web worker in an external JavaScript.
Here, we make a script that counts. The script is stored in the "demo_workers.js" file:
var i = 0;function timedCount() {i = i + 1;postMessage(i);setTimeout("timedCount()",500);}timedCount();{codeBox}
The important part of the code above is the postMessage() method, which posts a message back to the HTML page.
Note: Web workers usually are not used for simple scripts but for more CPU-intensive tasks.{alertSuccess}
Create a Web Worker Object
Now that we own the web worker file, we need to call it from an HTML page.
The following lines review if the worker already exists; if not - it creates a new web worker object and runs the code in “demo_workers.js” :-
if (typeof(w) == "undefined") {w = new Worker("demo_workers.js");}{codeBox}
Then we can transmit and obtain messages from the web worker.
Add an "onmessage" event listener to the web worker.
w.onmessage = function(event){document.getElementById("result").innerHTML = event.data;};{codeBox}
When the web worker posts a message, the code within the event listener is executed. The data from the web worker is stored in event.data.
Terminate a Web Worker
When a web worker object is made, it will continue to listen for messages (even after the external script is finished) until it is terminated.
To terminate a web worker, and free browser/computer resources, utilise the terminate() method:
w.terminate();{codeBox}
Reuse the Web Worker
If you put the worker variable to undefined after it has been terminated, you can reuse the code:
w = undefined;{codeBox}
Full Web Worker Example Code
We have already noticed the Worker code in the .js file. Below is the code for the HTML page:
Example
<!DOCTYPE html><html><body><p>Count numbers: <output id="result"></output></p><button onclick="startWorker()">Start Worker</button><button onclick="stopWorker()">Stop Worker</button><p><strong>Note: </strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p><script>var w;function startWorker() {if(typeof(Worker) !== "undefined") {if(typeof(w) == "undefined") {w = new Worker("demo_workers.js");}w.onmessage = function(event) {document.getElementById("result").innerHTML = event.data;};} else {document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";}}function stopWorker() {w.terminate();w = undefined;}</script></body></html>{codeBox}
Web Workers and the DOM
Since web workers are in external files, they don't have access to the following JavaScript objects:
- The window object
- The document object
- The parent object
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “HTML Web Workers API.” If this post is favourable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
