Webarbeidere i JavaScript

Articles

Denne artikkelen forklarer webarbeidere i 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` i JavaScript

Web Worker i JavaScript er en mekanisme som lar kode kjøre i en separat tråd fra hovedtråden. Dette gjør det mulig å utføre tunge beregninger og langvarige operasjoner asynkront, slik at hovedtråden ikke blokkeres. Ved å bruke Web Worker forbedres responsen i brukergrensesnittet, og applikasjonens ytelse økes.

Grunnleggende bruk av `Web Worker`

La oss se på grunnleggende bruk av Web Worker.

En ny Web Worker opprettes ved å spesifisere en JavaScript-fil.

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

Denne koden demonstrerer den grunnleggende mekanismen for å bruke en Web Worker for å be om beregninger fra hovedtråden og motta resultatet asynkront. Den sender 10 som en melding til Web Worker og mottar 20 som resultatmelding. Hovedtråden og Web Worker kommuniserer ved å sende og motta meldinger for å be om og motta behandlingsresultater.

Grunnleggende funksjoner

Web Worker gir følgende grunnleggende funksjoner.

postMessage og onmessage Brukes til å sende og motta meldinger mellom hovedtråden og Web Worker. Send data med postMessage og motta det med onmessage.
Tråduavhengighet Web Worker opererer helt uavhengig av hovedtråden. Derfor kan ikke variabler og funksjoner definert i hovedtråden nås. Nødvendige data må sendes via postMessage.
Import av skript For å laste inn eksterne skript i en Web Worker, bruk 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};

Alternativt kan du også bruke import som vist nedenfor.

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

Ved å spesifisere type: 'module' i argumentet til new Worker, kan du behandle arbeideren som en ES-modul og bruke import-syntaksen.

Forskjeller mellom `Web Worker` og `async`-funksjoner

`Web Worker`

Egenskaper

Trådisolasjon Web Worker kjører JavaScript-kode i en separat tråd. Dette gjør det mulig å utføre tunge beregninger uten å blokkere hovedtråden (UI-tråden).
Parallell behandling Ved å bruke Web Worker kan JavaScript-programmer utføre parallell behandling i flere tråder.
Meldingkommunikasjon Web Worker og hovedtråden deler ikke data direkte og utveksler meldinger ved hjelp av postMessage og onmessage.
Kan ikke få tilgang til UI Web Worker kan ikke få tilgang til DOM, så den kan ikke manipulere brukergrensesnittet direkte.

Brukstilfeller

Den er egnet for tunge beregningsprosesser som bildebehandling, dataanalyse og kryptering.
Den kan brukes når du ikke vil blokkere hovedtråden.

`async`

Egenskaper

Forenkling av asynkron behandling async-funksjonen er en syntaks for å gjøre asynkron behandling mer lesbar, og bruker internt Promise.
Enkeltråd Alle async-funksjoner kjører på hovedtråden. Derfor må du finne måter å unngå blokkering av UI-tråden.
Optimalt for I/O-operasjoner Den egner seg for asynkrone oppgaver som nettverkskommunikasjon og filavlesning, men ikke for tunge beregninger.

Brukstilfeller

Den er egnet for nettverkskommunikasjon, som API-kall.
Den er egnet for filavlesning og -skriving ved bruk av nettleser-APIer eller Node.js.

Hovedforskjeller

Egenskaper	Web Worker	async
Kjøremiljø	Separat tråd	Hovedtråd
Formål	Parallell prosessering, avlasting av tunge beregninger	Enkel beskrivelse av asynkrone operasjoner
DOM-tilgang	Ikke mulig	Mulig
Kommunikasjonsmetode	Meldingssending (f.eks. `postMessage`)	Ikke nødvendig (håndtert via direkte funksjonskall eller `await`)
Bruksområder	Tidskrevende beregninger, dataanalyse	I/O-operasjoner, API-kall

Når du bør bruke hver av dem

For CPU-krevende oppgaver kan du bruke Web Worker for å redusere belastningen på hovedtråden. På den annen side kan du for nettverkskommunikasjon eller I/O-operasjoner forenkle koden din ved å bruke async/await.

Ved å kombinere begge på en hensiktsmessig måte kan du oppnå effektiv asynkron behandling.

Eksempler på bruk av `Web Worker`

Eksempel på å avlaste tunge beregninger

Neste er et eksempel på å delegere tunge beregninger.

 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

Denne koden er et eksempel på å bruke en Web Worker for å skille ut og utføre tunge oppgaver som Fibonacci-beregninger fra hovedtråden.

Et eksempel på å spesifisere et oppgavenavn

Neste er et eksempel på å sende og motta meldinger ved å spesifisere et oppgavenavn.

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

Denne koden er et eksempel på å distribuere prosessering basert på task-navnet i meldingen, der Web Worker returnerer beregningsresultater eller feil til hovedtråden sammen med oppgavenavnet.

Notater

Når du bruker Web Worker, bør du merke deg følgende punkter.

Kan ikke få tilgang til DOM Web Worker kan ikke manipulere brukergrensesnittet eller få tilgang til DOM. DOM-manipulasjon må utføres i hovedtråden.
Kommunikasjonskostnader Det er noe overhead ved utveksling av data mellom hovedtråden og Web Worker. Dette kan påvirke ytelsen, spesielt når store mengder data utveksles hyppig.
Samme opprinnelsespolicy Web Worker-skript er underlagt samme opprinnelsespolicy. Skript kan ikke lastes fra forskjellige domener.

Bruk av Web Worker kan forbedre ytelsen og responsen til applikasjonen din, men det er viktig å bruke den hensiktsmessig og ta hensyn til begrensninger som manglende mulighet til å manipulere DOM.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Fetch/XMLHttpRequest i JavaScript `Service Worker` i JavaScript

Webarbeidere i JavaScript

YouTube Video

Web Worker i JavaScript

Grunnleggende bruk av Web Worker

Grunnleggende funksjoner

Forskjeller mellom Web Worker og async-funksjoner

Web Worker

Egenskaper

Brukstilfeller

async

Egenskaper

Brukstilfeller

Hovedforskjeller

Når du bør bruke hver av dem

Eksempler på bruk av Web Worker

Eksempel på å avlaste tunge beregninger

Et eksempel på å spesifisere et oppgavenavn

Notater

YouTube Video

`Web Worker` i JavaScript

Grunnleggende bruk av `Web Worker`

Forskjeller mellom `Web Worker` og `async`-funksjoner

`Web Worker`

`async`

Eksempler på bruk av `Web Worker`