जावास्क्रिप्ट में वेब वर्कर्स

Articles

यह लेख जावास्क्रिप्ट में वेब वर्कर्स को समझाता है।

YouTube Video

javascript-web-worker.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-web-worker.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-web-worker.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-web-worker.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

जावास्क्रिप्ट में `Web Worker`

जावास्क्रिप्ट में Web Worker एक मैकेनिज्म है जो कोड को मुख्य थ्रेड से अलग थ्रेड में चलाने की अनुमति देता है। यह भारी गणनाओं और लंबे समय तक चलने वाले ऑपरेशनों को असिंक्रोनस रूप से निष्पादित करने की अनुमति देता है, जिससे मुख्य थ्रेड ब्लॉक होने से बचता है। Web Worker का उपयोग करके, उपयोगकर्ता इंटरफ़ेस की प्रतिक्रिया क्षमता में सुधार होता है और एप्लिकेशन का प्रदर्शन बढ़ता है।

`Web Worker` का बुनियादी उपयोग

Web Worker के मूल उपयोग पर एक नज़र डालते हैं।

एक नया Web Worker जावास्क्रिप्ट फ़ाइल को निर्दिष्ट करके बनाया जाता है।

1// worker.js (created as a separate file)
2onmessage = function(event) {
3    // Receive a message
4    const data = event.data;
5    // Perform heavy computation or processing
6    const result = data * 2;
7    // Return the result to the main thread
8    postMessage(result);
9};

 1// Main thread (main.js)
 2const worker = new Worker('worker.js');
 3
 4// Send a message to the worker
 5worker.postMessage(10);
 6
 7// Receive a message from the worker
 8worker.onmessage = function(event) {
 9    console.log('Result from Worker: ', event.data); // Result: 20
10};
11
12// Error handling
13worker.onerror = function(error) {
14    console.error('Worker error: ', error);
15};

यह कोड मुख्य थ्रेड से गणना का अनुरोध करने और परिणाम को असिंक्रोनस रूप से प्राप्त करने के लिए Web Worker के उपयोग की मूल प्रक्रिया को दर्शाता है। यह Web Worker को संदेश के रूप में 10 भेजता है और परिणामस्वरूप 20 प्राप्त करता है। मुख्य थ्रेड और Web Worker संदेश भेजकर और प्राप्त करके प्रोसेसिंग के परिणाम का अनुरोध और प्राप्त करने के लिए आपस में संवाद करते हैं।

मूलभूत कार्य

Web Worker निम्नलिखित मुख्य विशेषताएँ प्रदान करता है।

postMessage और onmessage मुख्य थ्रेड और Web Worker के बीच संदेश भेजने और प्राप्त करने के लिए उपयोग किया जाता है। postMessage के माध्यम से डेटा भेजें और onmessage के माध्यम से प्राप्त करें।
थ्रेड स्वतंत्रता Web Worker मुख्य थ्रेड से पूरी तरह स्वतंत्र रूप से काम करता है। इसलिए, मुख्य थ्रेड में परिभाषित वेरिएबल्स और कार्यों को एक्सेस नहीं किया जा सकता है। आवश्यक डेटा postMessage के माध्यम से पास करना पड़ता है।
स्क्रिप्ट आयात Web Worker के अंदर बाहरी स्क्रिप्ट लोड करने के लिए importScripts() का उपयोग करें।

1// mathUtils.js
2function double(n) {
3    return n * 2;
4}

1// worker.js
2importScripts('mathUtils.js');
3
4onmessage = function(event) {
5    const input = event.data;
6    const result = double(input); // mathUtils.jsの関数を使用
7    postMessage(result);
8};

 1// Main thread (main.js)
 2const worker = new Worker('worker.js');
 3
 4// Send a message to the worker
 5worker.postMessage(10);
 6
 7// Receive a message from the worker
 8worker.onmessage = function(event) {
 9    console.log('Result from Worker: ', event.data); // Result: 20
10};
11
12// Error handling
13worker.onerror = function(error) {
14    console.error('Worker error: ', error);
15};

इसके अलावा, आप नीचे दिखाए अनुसार import का भी उपयोग कर सकते हैं।

1// lib.js
2
3// Simulated CPU-intensive task
4export function doHeavyWork(n) {
5    return n * 2;
6}

1// worker.js
2import { doHeavyWork } from './lib.js';
3
4self.onmessage = (event) => {
5  const data = event.data;
6  const result = doHeavyWork(data);
7  self.postMessage(result);
8};

 1// Main thread (main.js)
 2const worker = new Worker('worker.js', { type: 'module' });
 3
 4// Send a message to the worker
 5worker.postMessage(10);
 6
 7// Receive a message from the worker
 8worker.onmessage = function(event) {
 9    console.log('Result from Worker: ', event.data); // Result: 20
10};
11
12// Error handling
13worker.onerror = function(error) {
14    console.error('Worker error: ', error);
15};

new Worker के आर्ग्युमेंट में type: 'module' निर्दिष्ट करके आप worker को ES मॉड्यूल के रूप में इस्तेमाल कर सकते हैं और import सिंटैक्स का उपयोग कर सकते हैं।

`Web Worker` और `async` कार्यों के बीच अंतर

`Web Worker`

विशेषताएँ

थ्रेड पृथक्करण Web Worker जावास्क्रिप्ट कोड को अलग थ्रेड में निष्पादित करता है। यह भारी गणना प्रोसेसिंग को मुख्य थ्रेड (यूआई थ्रेड) को ब्लॉक किए बिना करने की अनुमति देता है।
समवर्ती प्रोसेसिंग Web Worker का उपयोग करने से जावास्क्रिप्ट प्रोग्राम कई थ्रेड्स में समवर्ती प्रोसेसिंग कर सकते हैं।
संदेश संचार Web Worker और मुख्य थ्रेड सीधे डेटा साझा नहीं करते, बल्कि postMessage और onmessage का प्रयोग करके संदेशों का आदान-प्रदान करते हैं।
यूआई तक पहुंच संभव नहीं Web Worker DOM तक पहुंच नहीं कर सकता, इसलिए यह सीधे यूआई में बदलाव नहीं कर सकता।

उपयोग के मामले

यह भारी गणना प्रक्रियाओं जैसे इमेज प्रोसेसिंग, डेटा विश्लेषण और एन्क्रिप्शन के लिए उपयुक्त है।
इसका उपयोग तब किया जा सकता है जब आप मुख्य थ्रेड को ब्लॉक नहीं करना चाहते।

`async`

विशेषताएँ

असिंक्रोनस प्रोसेसिंग को सरल बनाना async फ़ंक्शन एक सिंटैक्स है जो असिंक्रोनस प्रोसेसिंग को अधिक पठनीय बनाता है, आंतरिक रूप से Promise का उपयोग करता है।
एकल थ्रेड सभी async फ़ंक्शन मुख्य थ्रेड पर चलते हैं। इसलिए, आपको यूआई थ्रेड को ब्लॉक होने से बचाने के लिए तरीके तैयार करने की आवश्यकता होती है।
I/O ऑपरेशंस के लिए अनुकूल यह नेटवर्क कम्युनिकेशन और फाइल पढ़ने जैसे असिंक्रोनस कार्यों के लिए उपयुक्त है, लेकिन भारी गणना के लिए नहीं।

उपयोग के मामले

यह API कॉल जैसे नेटवर्क कम्युनिकेशन के लिए उपयुक्त है।
यह ब्राउज़र API या Node.js का उपयोग करके फ़ाइल पढ़ने और लिखने के लिए उपयुक्त है।

मुख्य अंतर

विशेषताएँ	Web Worker	async
निष्पादन वातावरण	अलग थ्रेड	मुख्य थ्रेड
उद्देश्य	समानांतर प्रसंस्करण, भारी गणनाओं का भार कम करना	असिंक्रोनस संचालन का संक्षिप्त विवरण
DOM का उपयोग	संभव नहीं है	संभव है
संचार विधि	मैसेज पासिंग (जैसे, `postMessage`)	आवश्यक नहीं (प्रत्यक्ष फ़ंक्शन कॉल या `await` द्वारा प्रबंधित)
उपयोग के मामले	समय लेने वाली गणनाएँ, डेटा विश्लेषण	I/O संचालन, एपीआई कॉल

प्रत्येक का उपयोग कब करें

CPU-गहन कार्यों के लिए, आप मुख्य थ्रेड पर भार कम करने के लिए Web Worker का उपयोग कर सकते हैं। दूसरी ओर, नेटवर्क संचार या I/O संचालन के लिए, आप अपने कोड को async/await का उपयोग कर सरल बना सकते हैं।

दोनों को उचित रूप से संयोजित करके, आप प्रभावी असिंक्रोनस प्रसंस्करण प्राप्त कर सकते हैं।

`Web Worker` उपयोग के उदाहरण

भारी गणनाओं को ऑफलोड करने का उदाहरण

आगे भारी गणनाओं को ऑफलोड करने का एक उदाहरण है।

 1// worker.js
 2onmessage = function(event) {
 3    const num = event.data;
 4    const result = fibonacci(num);
 5    postMessage(result);
 6};
 7
 8function fibonacci(n) {
 9    if (n <= 1) return n;
10    return fibonacci(n - 1) + fibonacci(n - 2);
11}

1// Main thread
2const worker = new Worker('worker.js');
3
4worker.onmessage = function(event) {
5    console.log('Fibonacci result: ', event.data);
6};
7
8worker.postMessage(40); // Delegate heavy computation to the worker

यह कोड वेब वर्कर का उपयोग करके फाइबोनैचि अनुक्रम जैसे भारी कार्यों को मुख्य थ्रेड से अलग करने और चलाने का एक उदाहरण है।

कार्य का नाम निर्दिष्ट करने का एक उदाहरण

आगे कार्य का नाम निर्दिष्ट करके संदेश भेजने और प्राप्त करने का एक उदाहरण है।

 1// worker.js
 2self.onmessage = function(event) {
 3    switch (event.data.task) {
 4        case 'add':
 5            const result = event.data.a + event.data.b;
 6            self.postMessage({ task: 'result', value: result });
 7            break;
 8        default:
 9            self.postMessage({ task: 'error', message: 'Invalid Task' });
10    }
11};

 1// Main thread
 2const worker = new Worker('worker.js');
 3
 4worker.onmessage = function(event) {
 5    switch (event.data.task) {
 6        case 'result':
 7            console.log('Task result: ', event.data.value);
 8            break;
 9        case 'error':
10            console.error('Error: ', event.data.message);
11            break;
12    }
13};
14
15worker.postMessage({ task: 'add', a: 10, b: 20 });

यह कोड संदेश में कार्य नाम के आधार पर प्रोसेसिंग वितरित करने का उदाहरण है, जिसमें वेब वर्कर गणना परिणाम या त्रुटि को कार्य के नाम के साथ मुख्य थ्रेड पर लौटाता है।

नोट्स

Web Worker का उपयोग करते समय निम्नलिखित बातों का ध्यान रखें।

DOM तक पहुँच नहीं Web Worker UI में बदलाव नहीं कर सकता और ना ही DOM तक पहुँच सकता है। DOM में संशोधन मुख्य थ्रेड में ही किया जाना चाहिए।
संचार ओवरहेड मुख्य थ्रेड और Web Worker के बीच डेटा का आदान-प्रदान करते समय कुछ ओवरहेड होता है। यह प्रदर्शन को प्रभावित कर सकता है, विशेष रूप से जब बड़े पैमाने पर डेटा का बार-बार आदान-प्रदान किया जाता है।
सैम-ओरिजिन नीति Web Worker स्क्रिप्ट्स समान-स्रोत (same-origin) नीति के अधीन होती हैं। स्क्रिप्ट्स को अलग-अलग डोमेन से लोड नहीं किया जा सकता है।

Web Worker का उपयोग आपकी एप्लिकेशन के प्रदर्शन और उत्तरदायीपन में सुधार कर सकता है, लेकिन DOM को संशोधित करने में अक्षमता जैसे प्रतिबंधों को ध्यान में रखते हुए इसका उपयुक्त रूप से उपयोग करना महत्वपूर्ण है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

जावास्क्रिप्ट में Fetch/XMLHttpRequest

जावास्क्रिप्ट में वेब वर्कर्स

YouTube Video

जावास्क्रिप्ट में Web Worker

Web Worker का बुनियादी उपयोग

मूलभूत कार्य

Web Worker और async कार्यों के बीच अंतर

Web Worker

विशेषताएँ

उपयोग के मामले

async

विशेषताएँ

उपयोग के मामले

मुख्य अंतर

प्रत्येक का उपयोग कब करें

Web Worker उपयोग के उदाहरण

भारी गणनाओं को ऑफलोड करने का उदाहरण

कार्य का नाम निर्दिष्ट करने का एक उदाहरण

नोट्स

YouTube Video

जावास्क्रिप्ट में `Web Worker`

`Web Worker` का बुनियादी उपयोग

`Web Worker` और `async` कार्यों के बीच अंतर

`Web Worker`

`async`

`Web Worker` उपयोग के उदाहरण