Mga Web Worker sa JavaScript

Articles

Ipinaliliwanag ng artikulong ito ang Mga Web Worker sa JavaScript.

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` sa JavaScript

Ang \Web Worker` sa JavaScript ay isang mekanismo na nagpapahintulot sa code na tumakbo sa hiwalay na thread mula sa main thread.. Pinapayagan nito ang mga mabibigat na kalkulasyon at mahabang operasyon na maisagawa nang asynchronous, na pinipigilan ang pagbara ng pangunahing thread. Sa pamamagitan ng paggamit ng Web Worker`, bumubuti ang pagiging tumutugon ng user interface at tumataas ang kakayahan ng aplikasyon.

Ang pangunahing paggamit ng `Web Worker`

Tingnan natin ang pangunahing paggamit ng \Web Worker``.

Ang bagong \Web Worker` ay nililikha sa pamamagitan ng pagtukoy ng isang JavaScript file.`.

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};

Ipinapakita ng code na ito ang pangunahing mekanismo ng paggamit ng \Web Worker` upang humiling ng kalkulasyon mula sa main thread at tumanggap ng resulta nang asynchronous.. Ipinapadala nito ang `10` bilang mensahe sa `Web Worker` at natatanggap ang `20` bilang mensahe ng resulta.. Ang main thread at ang `Web Worker` ay nagkakausap sa pamamagitan ng pagpapadala at pagtanggap ng mga mensahe upang humiling at tumanggap ng resulta ng pagproseso.`.

Mga pangunahing function

Ang \Web Worker` ay nagbibigay ng mga sumusunod na pangunahing tampok:`.

`postMessage` at `onmessage` Ginagamit upang magpadala at tumanggap ng mga mensahe sa pagitan ng main thread at ng \Web Worker`. Magpadala ng data gamit ang postMessageat tanggapin ito gamit angonmessage`.
Kalayaan ng Thread Ang \Web Worker` ay gumagana nang ganap na hiwalay mula sa main thread.. Dahil dito, ang mga variable at function na tinukoy sa pangunahing thread ay hindi maaring ma-access. Ang kinakailangang data ay kailangang ipasa gamit ang postMessage`.
Pag-import ng Script Upang mag-load ng external na mga script sa loob ng \Web Worker`, gamitin ang `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};

Bilang alternatibo, maaari mo ring gamitin ang \import` gaya ng ipinapakita sa ibaba`.

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};

Sa pamamagitan ng pagtatakda ng \type: 'module'` sa argumento ng `new Worker`, maaari mong ituring ang worker bilang isang ES module at gamitin ang `import` syntax.`.

Mga pagkakaiba ng `Web Worker` at mga `async` na function

`Web Worker`

Mga Katangian

Paghiwalay ng Thread Ang \Web Worker` ay nagpapatakbo ng JavaScript code sa isang hiwalay na thread.`. Ito ay nagbibigay-daan sa pagproseso ng mabigat na kalkulasyon nang hindi hinaharangan ang pangunahing thread (UI thread).
Sabay-sabay na Pagproseso Ang paggamit ng \Web Worker` ay nagpapahintulot sa mga JavaScript program na magsagawa ng sabay-sabay na pagproseso sa maraming thread.`.
Komunikasyon sa Mensahe Ang \Web Worker` at ang main thread ay hindi direktang nagbabahagi ng datos at nagpapalitan ng mga mensahe gamit ang `postMessage` at `onmessage``.
Hindi Maaaring Mag-access ng UI Ang \Web Worker` ay hindi maaaring maka-access sa DOM, kaya hindi nito direktang mamamanipula ang UI.`.

Mga Gamit

Ito ay angkop para sa mga mabibigat na proseso ng komputasyon tulad ng pagproseso ng imahe, pagsusuri ng data, at enkripsyon.
Ito ay maaaring gamitin kapag ayaw mong harangan ang pangunahing thread.

`async`

Mga Katangian

Pagpapasimple ng Asynchronous na Pagproseso Ang \async` function ay isang syntax upang gawing mas madaling basahin ang asynchronous na pagproseso, at gumagamit ito ng `Promise` sa loob.`.
Isang Thread Lahat ng \async` function ay tumatakbo sa main thread.`. Kaya’t kailangan mong mag-isip ng mga paraan upang maiwasang harangan ang UI thread.
Mainam para sa mga Operasyon ng I/O Ito ay angkop para sa mga asynchronous na gawain tulad ng komunkasyon sa network at pagbasa ng file, ngunit hindi para sa mabigat na kalkulasyon..

Mga Gamit

Ito ay angkop para sa komunikasyon sa network gaya ng mga tawag sa API..
Ito ay angkop para sa pagbasa at pagsusulat ng file gamit ang browser APIs o Node.js..

Pangunahing Pagkakaiba

Mga Katangian	Web Worker	async
Kapaligiran ng Pagpapatupad	Hiwalay na thread	Pangunahing thread
Layunin	Magkakasabay na pagpoproseso, pagbawas ng mabigat na pagkalkula	Maikli na paglalarawan ng mga asynchronous na operasyon
Pag-access sa DOM	Hindi posible	Posible
Paraan ng Komunikasyon	Pagpapasa ng mensahe (hal. `postMessage`)	Hindi kinakailangan (inaasikaso sa pamamagitan ng direktang pagtawag ng function o `await`)
Mga Gamit	Nakakonsumo ng oras na pagkalkula, pagsusuri ng datos	Mga operasyon sa I/O, mga tawag sa API

Kailan Gamitin ang Bawat Isa

Para sa mga gawain na mabigat sa CPU, maaari mong gamitin ang Web Worker upang bawasan ang bigat sa pangunahing thread. Sa kabilang banda, para sa komunikasyon sa network o mga operasyon sa I/O, maaari mong gawing mas simple ang iyong code gamit ang async/await.

Sa pamamagitan ng tamang pagsasama ng dalawa, maaari kang makamit ang epektibong asynchronous na pagpoproseso.

Mga Halimbawa ng Paggamit ng `Web Worker`

Halimbawa ng pagbawas sa mabibigat na pagkalkula

Ang susunod ay isang halimbawa ng pag-offload ng mabibigat na pag-compute.

 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

Ang code na ito ay isang halimbawa ng paggamit ng Web Worker upang ihiwalay at isagawa ang mga mabibigat na gawain tulad ng pagkalkula ng Fibonacci sequence mula sa pangunahing thread.

Isang halimbawa ng pagtukoy ng pangalan ng gawain

Ang susunod ay isang halimbawa ng pagpapadala at pagtanggap ng mga mensahe sa pamamagitan ng pagtukoy ng pangalan ng gawain.

 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 });

Ang code na ito ay isang halimbawa ng pag-didispatch ng proseso batay sa pangalan ng task sa mensahe, kung saan ang Web Worker ay nagbabalik ng resulta ng pagkalkula o error sa pangunahing thread kasama ang pangalan ng gawain.

Mga Tala

Kapag gumagamit ng \Web Worker`, tandaan ang mga sumusunod na punto`.

Hindi Maaaring Maka-access ng DOM Hindi maaaring mamaniobra ng \Web Worker` ang UI o maka-access sa DOM.`. Ang manipulasyon ng DOM ay kailangang gawin sa pangunahing thread.
Karagdagang Gamit sa Komunikasyon May kaunting overhead kapag nagpapalitan ng datos ang main thread at ang \Web Worker`.`. Maaaring maapektuhan nito ang performance, lalo na kapag madalas na nagpapalitan ng malaking dami ng data.
Patakaran ng Parehong Pinagmulan (Same-Origin Policy) Ang mga script ng \Web Worker` ay sakop ng patakaran ng parehong pinagmulan (same-origin policy).`. Ang mga script ay hindi maaaring i-load mula sa iba't ibang mga domain.

Ang paggamit ng Web Worker ay maaaring mapabuti ang pagganap at kasagutan ng iyong aplikasyon, ngunit mahalagang gamitin ito nang tama isinasaalang-alang ang mga limitasyon tulad ng kawalan ng kakayahang manipulahin ang DOM.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Fetch/XMLHttpRequest sa JavaScript

Mga Web Worker sa JavaScript

YouTube Video

Web Worker sa JavaScript

Ang pangunahing paggamit ng Web Worker

Mga pangunahing function

Mga pagkakaiba ng Web Worker at mga async na function

Web Worker

Mga Katangian

Mga Gamit

async

Mga Katangian

Mga Gamit

Pangunahing Pagkakaiba

Kailan Gamitin ang Bawat Isa

Mga Halimbawa ng Paggamit ng Web Worker

Halimbawa ng pagbawas sa mabibigat na pagkalkula

Isang halimbawa ng pagtukoy ng pangalan ng gawain

Mga Tala

YouTube Video

`Web Worker` sa JavaScript

Ang pangunahing paggamit ng `Web Worker`

Mga pagkakaiba ng `Web Worker` at mga `async` na function

`Web Worker`

`async`

Mga Halimbawa ng Paggamit ng `Web Worker`