JavaScript Academy · leksjon

Opprette en Web Worker

Start en bakgrunnstråd for arbeid.

Leksjon 1 av 413 trinn

Opprette en Web Worker er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hvorfor Web Workers?

JavaScript kjører på én enkelt hovedtråd. En langvarig beregning blokkerer alt: brukergrensesnittet fryser, og klikk slutter å svare. Web Workers kjører skript på en bakgrunnstråd, slik at siden forblir responsiv.

Opprette en Worker

Start en worker ved å sende en skript-URL til konstruktøren Worker. Nettleseren laster inn filen og kjører den på en separat tråd.

const worker = new Worker('worker.js');
// The code in worker.js now runs on its own thread.

Worker-skriptet

Worker-filen er vanlig JavaScript, men kjører i sitt eget globale scope (uten window og uten document). Den kommuniserer bare gjennom meldinger.

// worker.js
console.log('worker started');
// This runs off the main thread.

To separate globale scope

Hovedsiden og workeren har hvert sitt globale scope og minne. De kan ikke dele variabler direkte, men utveksler kopier av data gjennom meldinger.

Hovedtråd: window, DOM, brukergrensesnitt
Worker-tråd: self, beregninger, ingen DOM

Self i workeren

Inne i en worker er det globale objektet self (en DedicatedWorkerGlobalScope). De knytter hendelsesbehandlere til det og kaller API-er på det, selv om self ofte er implisitt.

// worker.js
self.addEventListener('message', (e) => {
  console.log('worker got:', e.data);
});

Module Workers

De kan opprette en worker som bruker ES-modulens import ved å sende alternativet type: 'module'. Dette gjør at workeren kan importere andre moduler på en ryddig måte.

const worker = new Worker('worker.js', { type: 'module' });
// Inside worker.js you can now use import statements.

Importere skript (klassisk)

I en klassisk worker, altså en som ikke er en modul, bruker De importScripts for å laste inn ekstra skript synkront i workerens scope.

// Inside a classic worker:
importScripts('math-utils.js', 'helpers.js');
// Their globals are now available in the worker.

Avslutte en Worker

Stopp en worker fra hovedtråden med worker.terminate(), eller fra innsiden med self.close(). Dette frigjør tråden og minnet den bruker.

// From the main thread:
worker.terminate();

// From inside the worker:
// self.close();

Håndtere Worker-feil

Lytt etter error-hendelsen på workeren for å fange opp ubehandlede unntak som oppstår i den. Hendelsen inneholder meldingen, filnavnet og linjenummeret.

worker.addEventListener('error', (e) => {
  console.log('worker error:', e.message, 'at line', e.lineno);
});

Kravet om samme opphav

Worker-skriptet må leveres fra samme opphav som siden, eller via en Blob-URL. De kan ikke laste inn en worker direkte fra en vilkårlig cross-origin-URL.

// Same-origin file path - works:
const w1 = new Worker('/js/worker.js');

// You can also build one from a Blob URL when needed.

Dedikert kontra delt

En Worker er dedikert og knyttet til siden som opprettet den. En SharedWorker kan nås av flere sider fra samme opphav. Dette kurset fokuserer på dedikerte workere.

Rask kontroll

Test forståelsen Deres av hvordan Web Workers opprettes.

Besvar den i den interaktive leksjonen

Oppsummering

De har lært å opprette Web Workers:

new Worker('worker.js') starter en bakgrunnstråd.
Workeren har sitt eget globale objekt (self) og ingen DOM.
Bruk type: 'module' for importer, eller importScripts i klassiske workere.
terminate() / self.close() stopper den.
Workere må ha samme opphav.

Deretter skal vi se på kommunikasjon mellom tråder.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Opprette en Web Worker» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Opprette en Web Worker», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Opprette en Web Worker»?

Start en bakgrunnstråd for arbeid. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Opprette en Web Worker»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy