JavaScript Academy · Lektion

Skapa en Web Worker

Starta en bakgrundstråd för arbete.

Lektion 1 av 413 steg

Skapa en Web Worker är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Varför Web Workers?

JavaScript körs i en enda huvudtråd. En lång beräkning blockerar allt: gränssnittet fryser och klick slutar svara. Web Workers kör skript i en bakgrundstråd så att sidan förblir responsiv.

Skapa en worker

Starta en worker genom att skicka en skript-URL till konstruktorn Worker. Webbläsaren laddar filen och kör den i 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 är vanlig JavaScript men körs i ett eget globala scope, utan window och utan document. Den kommunicerar endast genom meddelanden.

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

Två separata globala scope

Huvudsidan och workern har varsitt globalt scope och varsitt minne. De kan inte dela variabler direkt utan utbyter kopior av data via meddelanden.

Huvudtråd: window, DOM, UI
Worker-tråd: self, beräkningar, inget DOM

Self i workern

I en worker är det globala objektet self (en DedicatedWorkerGlobalScope). Du kopplar händelsehanterare och anropar API:er på det, även om self ofta är implicit.

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

Module Workers

Du kan skapa en worker som använder ES-modulens import genom att skicka alternativet type: 'module'. Då kan workern importera andra moduler på ett tydligt sätt.

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

Importera skript (klassisk worker)

I en klassisk worker, alltså en som inte använder moduler, använder du importScripts för att synkront läsa in ytterligare skript i workerns scope.

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

Avsluta en worker

Stoppa en worker från huvudtråden med worker.terminate() eller inifrån workern med self.close(). Det frigör tråden och dess minne.

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

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

Hantera worker-fel

Lyssna efter händelsen error på workern för att fånga ouppfångade undantag som kastas i den. Händelsen innehåller meddelandet, filnamnet och radnumret.

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

Krav på samma ursprung

Worker-skriptet måste levereras från samma origin som sidan, eller via en Blob-URL. Du kan inte läsa in en worker direkt från en godtycklig URL med ett annat ursprung.

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

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

Dedikerad eller delad

En Worker är dedikerad: den är knuten till sidan som skapade den. En SharedWorker kan nås av flera sidor från samma origin. Den här kursen fokuserar på dedikerade workers.

Snabbtest

Testa dina kunskaper om att skapa Web Workers.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har lärt dig att skapa Web Workers:

new Worker('worker.js') startar en bakgrundstråd.
Workern har ett eget globalt objekt (self) och saknar DOM.
Använd type: 'module' för importer eller importScripts i klassiska workers.
terminate() / self.close() stoppar den.
Workers måste ha samma origin.

Härnäst: meddelanden mellan trådar.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Skapa en Web Worker” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Skapa en Web Worker”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Skapa en Web Worker”?

Starta en bakgrundstråd för arbete. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Skapa en Web Worker”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy