Web Workers JavaScript – kör tung kod i bakgrunden

Web Workers JavaScript låter dig köra JavaScript-kod i en egen tråd, helt separerad från webbsidans huvudtråd. Det innebär att tung beräkning, databehandling eller långa loopar kan köras i bakgrunden utan att sidans gränssnitt fryser eller blir trögt. För en webbutvecklare som bygger interaktiva sidor är Web Workers ett sätt att hålla sidan responsiv även när datorarbetet blir krävande.

I den här guiden går vi igenom vad en Web Worker är, varför huvudtråden kan blockeras, hur du skapar en worker steg för steg, ett konkret kod exempel och vilka misstag du ska undvika. Vi jämför också Web Workers med async och await, eftersom de ofta blandas ihop.

Vad en Web Worker är

En Web Worker är ett JavaScript-objekt som kör kod i en bakgrundstråd som webbläsaren har skapat separat från huvudtråden. Huvudtråden är den som sköter rendering, klick, scroll och allt användaren ser och gör. Om du kör en tung loop direkt på huvudtråden svarar sidan inte på klick förrän loopen är klar.

En Web Worker har inte tillgång till Document Object Model (DOM). Den kan inte ändra webbsidans innehåll, läsa element eller lyssna på klick direkt. I stället kommunicerar worker och huvudtråd med varandra genom att skicka meddelanden. Huvudtråden skickar data till workern med postMessage, och workern svarar tillbaka på samma sätt.

Den här arkitekturen gör att tunga beräkningar kan pågå i bakgrunden medan användaren fortfarande kan klicka, bläddra och interagera med sidan.

Varför huvudtråden blockeras

JavaScript körs traditionellt i en enda tråd. Allt som händer på en webbsida – rendering av HTML, hantering av händelser, körning av skript – sker på samma huvudtråd. Det innebär att en långvarig uppgift blockerar allt annat.

Exempelvis om du sorterar en stor lista med tiotusentals poster eller bearbetar en stor bild direkt på huvudtråden, kommer sidans gränssnitt att låsa sig. Knappar går inte att klicka på, animationer stannar och sidan känns trasig. Webbläsaren kan till och med fråga om sidan ska stängas ned eftersom den inte svarar.

Med Web Workers flyttar du den tunga beräkningen till en egen tråd. Huvudtråden är fri att svara på användaren, medan workern bearbetar data i sin egen takt.

Så skapar du en Web Worker – steg för steg

Att komma igång med Web Workers är inte svårt. Följ dessa steg.

Steg 1: Skapa en separat fil för workern

En Web Worker kör kod från en egen JavaScript-fil. Skapa till exempel filen worker.js med innehåll som lyssnar på meddelanden och svarar tillbaka.

self.onmessage = function(event) {
  const tal = event.data;
  let resultat = 0;
  for (let i = 0; i < tal; i++) {
    resultat += i;
  }
  self.postMessage(resultat);
};

Här tar workern emot ett tal, räknar ut en summa i en loop och skickar tillbaka resultatet med postMessage.

Steg 2: Starta workern från huvudtråden

I din huvudfil skapar du en ny worker och pekar ut filen.

const worker = new Worker('worker.js');

Steg 3: Skicka data till workern

Använd postMessage för att skicka data från huvudtråden till workern.

worker.postMessage(1000000);

Steg 4: Ta emot svaret från workern

Lyssna på onmessage på huvudtråden för att få workerns svar.

worker.onmessage = function(event) {
  console.log('Resultat från workern:', event.data);
};

Steg 5: Avsluta workern när den inte behövs längre

En worker fortsätter köras i bakgrunden tills du avslutar den eller stänger fliken. Använd terminate för att frigöra resurser.

worker.terminate();

Konkrekt exempel: räkna i bakgrunden

För att se skillnaden kan du jämföra två varianter. I den första varianten körs en tung loop direkt i ett klick på huvudtråden. Sidan blir inte responsiv förrän loopen är klar. I den andra varianten skickas samma arbete till en Web Worker, och användaren kan fortsätta klicka och scrolla medan beräkningen pågår i bakgrunden.

Det är exakt den här typen av avlastning som gör Web Workers användbara i webbaserade kodeditorer, bildbehandling eller datavisualisering där stora mängder information ska bearbetas utan att gränssnittet låser sig.

Vanliga misstag med Web Workers

Det finns några saker som ofta går fel när man börjar använda Web Workers.

Den första är att försöka komma åt DOM från workern. Eftersom workern inte har tillgång till document eller window kommer koden att kasta ett fel. All DOM-hantering måste göras på huvudtråden, baserat på de meddelanden workern skickar tillbaka.

Det andra misstaget är att glömma terminate. En worker som startas men aldrig avslutas fortsätter att konsumera minne och processor, även efter att användaren har lämnat sidan.

Det tredje är att skicka mycket stora objekt mellan trådarna utan att tänka på överföringen. Varje meddelande kopieras som standard, vilket kan bli långsamt om datamängden är stor. För stora datamängder kan man använda så kallade transferable objects för att föra över äganderätt istället för att kopiera.

Web Workers versus async och await

async och await gör att kod ser ut som om den körs sekventiellt även om den väntar på något, till exempel ett nätverksanrop. Men async och await körs fortfarande på huvudtråden. De gör inte att en tung loop körs parallellt.

Web Workers är däremot verkliga separata trådar. De kör kod samtidigt med huvudtråden, inte istället för den på samma tråd. Använd async await för I/O-väntan som nätverksanrop, och Web Workers för tung processorbelastning som blockerar gränssnittet.

Stöd i webbläsare

Web Workers stöds av alla större moderna webbläsare, både på dator och mobila enheter. Det är en etablerad webbstandard som har funnits länge och är trygg att använda i produktion.

Relaterade guider på Webide

Om du vill fördjupa dig i hur JavaScript hanterar asynkronitet har vi flera guider som passar bredvid den här:

• JavaScript event loop – så fungerar asynkron kod
• Promises JavaScript – Guide till asynkron programmering
• Async await JavaScript – Guide för renare asynkron kod

Dessa artiklar förklarar hur JavaScript hanterar icke-blockerande operationer, vilket är ett bra komplement till att förstå när Web Workers är rätt verktyg.

Vanliga frågor

Kan jag använda Web Workers i alla webbläsare? Ja, alla större moderna webbläsare stöder Web Workers, inklusive mobila webbläsare.

Kör Web Workers i parallell med huvudtråden? Ja, en Web Worker körs på en egen tråd och kan arbeta samtidigt som huvudtråden hanterar användargränssnittet.

Får en Web Worker ändra på webbsidans innehåll? Nej, en Web Worker har inte tillgång till DOM. Allt som syns på sidan måste uppdateras från huvudtråden.

Hur avslutar jag en Web Worker? Använd worker.terminate() från huvudtråden när workern inte behövs längre.