Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are the restrictions of web workers on DOM in JavaScript?
JavaScript is a single-threaded programming language. It means it executes all code of the application in a step-by-step manner. In some situations, we need to execute computationally extensive tasks. For example, applications with large databases need to process large amounts of data, which may take more time than usual. To improve the application performance in this case, we need to use multi-threading, which can run multiple tasks concurrently.
JavaScript doesn’t support multi-threading, but web workers allow us to run particular tasks in the background, improving the application's performance and user experience. However, there are some limitations in using the web works while accessing the DOM elements. Below, we will discuss the limitations of web workers with the solution.
Restrictions of Web Workers on DOM
1. Web Workers Can’t Access DOM Elements Directly
The DOM (Document object model) contains the structure of the web page. We can access the web page elements from the DOM. However, the Main thread only can access the DOM elements and update them, but web workers can’t access the DOM elements. Web workers are required to communicate to the main thread via message to perform any operation with DOM elements.
// This is a web worker code in app.js
// The below code will give an error
let ele = document.getElementById("id");
console.log(ele);
// Main JavaScript code
// This code is correct
let ele = document.getElementById("id");
console.log(ele);
2. Web Workers have Limited DOM-related Functionality
The web workers have limited DOM-related functionality. We can’t use the DOM-related APIs in the web workers. The fetch(), querySelector(), getElementById(), document, window, etc. We can’t use APIs and window-related objects in the web workers. If we want to use such APIs, we need to communicate with the main thread via message and use APIs-related functionality in the Main thread.
In the below code, we can see that if we use the window or document object in the web worker file, it gives an error.
// This is a web worker code in app.js
// The below code will give an error
window.addEventListener("load", () => {
let ele = document.querySelector("#id");
});
// Main JavaScript code
// This code is the correct
window.addEventListener("load", () => {
let ele = document.querySelector("#id");
});
3. Restricted UI Updates
The web workers are not allowed to update the UI as they can’t access the DOM elements. If we need to update the UI using the web worker, we can send a message to the main thread to update UI so that the main thread can access the DOM element and update it accordingly.
// This is a web worker code in app.js
// The below code will give an error
window.addEventListener("load", () => {
let ele = document.querySelector("#id");
ele.style.color = "blue";
});
// Main JavaScript code
// This code is the correct
window.addEventListener("load", () => {
let ele = document.querySelector("#id");
ele.style.color = "blue";
});
Communicating with the Main Thread from Web Workers to overcome DOM Restrictions
The best solution to overcome the DOM-related limitations of web workers is to communicate with the main thread using the web workers. We can process the data using the web workers and send the resultant data to the main thread via message events. So, the main thread can update the DOM elements.
Example
In the example below, we use the postMessage() method to send a message from the web worker to the main thread.
In the main thread, we use the ‘onmessage’ event to execute the callback function whenever it receives the message. We can perform the operations on the DOM elements in the callback function. Here, we access the element using its id and update its text content with new text, which we got from the web worker.
// Web worker file (app.js)
self.postMessage("This is a updated text!");
// Main thread
const app = new Worker("app.js");
app.onmessage = function(event) {
// Update text in UI
const para = document.getElementById("text");
para.textContent = event.data;
};
Web workers are very powerful to perform tasks parallelly or in the background, but when we use it with DOM, we need to overcome its limitations by communicating with the main thread. Here, we learn 3 main limitations of web workers and solutions to overcome the limitations.
312 Views
