HTML TUTORIALS-
HTML Web Workers API Tag –
Introduction-
🔹HTML all complete example of using a Web Worker in a simple HTML/JavaScript project. This example show's how to offload a CPU-intensive task (e.g., calculating prime numbers) to a Web Worker so the main thread (UI) stays responsive..
🧠 Why Use Web Workers?-
✅HTML5 allow you to run JavaScript code in the background—separate from the main execution thread of a web page. This means your UI stays responsive even while running heavy computations.
✅ In a JavaScript runs on the main thread of your web browser. If you perform a heavy task (like image processing or looping through large data syntax), it can harden the UI. Web Workers help by unload such (work)tasks to a background thread.
✅ Run scripts in background threads
✅ Don’t block the user interface
✅ Communicate via messages (postMessage)
✅ Cannot access the DOM directly
📦 Types of Web Workers-
✅Dedicated Worker – Used by one script only
✅Shared Worker – Can be accessed by multiple scripts, even from different windows/tabs
✅Service Worker – Specialized worker for background syncing, caching, etc.
🧩 Project Structure: -
web-worker-example/ ├── index.html ├── main.js └── worker.js ✅ Example 1: Basic Example index.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Worker Example</title>
</head>
<body>
<h1>Web Worker Example: Prime Number Generator</h1>
<button id="start">Start Calculating</button>
<p id="output">Waiting...</p>
<script src="main.js"></script>
</body>
</html>
✅ Example 2: main.js (Main Thread):-
// Create a new Web Worker
const worker = new Worker('worker.js');
const startButton = document.getElementById('start');
const output = document.getElementById('output');
startButton.addEventListener('click', () => {
output.textContent = 'Calculating primes...';
// Send message to worker to start calculating
worker.postMessage({ cmd: 'start', limit: 100000 });
});
// Listen for messages from the worker
worker.onmessage = function(event) {
output.textContent = `Found ${event.data.count} prime numbers below ${event.data.limit}`;
};
✅ Example 3: worker.js (Web Worker):-
// Function to check if a number is prime
function isPrime(n) {
if (n < 2) return false;
for (let i = 2; i <= Math.sqrt(n); i++) {
if (n % i === 0) return false;
}
return true;
}
onmessage = function(event) {
if (event.data.cmd === 'start') {
const limit = event.data.limit;
let count = 0;
for (let i = 2; i < limit; i++) {
if (isPrime(i)) count++;
}
// Send result back to main thread
postMessage({ count, limit });
}
};
-How To Import Data(LSMW) LEGACY SYSTEM MIGRATION WORKBENCH
-Genral Ledger Chart Of Accounts-OBD4
-Document 90039783 saved (no accounting document generated)