En introduktion till JavaScript-API för webbarbetare

Webbarbetare är ett JavaScript API som tillåter dig att kör skript i en separat tråd från huvuddelen. Det kan vara till nytta när du inte vill ha något hinder i utförandet av huvudskripten på grund av bakgrundsspecifika skript.

Webbansvariga API är stöds i nästan alla webbläsare, för mer detaljerad information, kolla på CanIUse-dokumenten. Innan du kommer in i koden, låt oss se några scenarier där du kanske vill använda detta API så att du kan få en uppfattning om vad jag menade med bakgrundsspecifika skript.

Använd fall

Låt oss säga att det finns ett manus som hämtar och behandlar en fil. Om en fil är betydligt stor det tar lång tid att behandlas! Vilka kan häva andra skript som åberopades senare från att bli körda.

Men om Filbehandling flyttas till en bakgrundsgänga, känd som arbetstråd, Andra händelser kommer inte att blockeras förrän den tidigare är över.

Manuset utförd i en bakgrundsarbetare tråd är känd som arbetstagarskript eller bara arbetstagare.

För ett annat exempel, föreställ dig att det finns a stor form, ordnad i flikar. Det skrivs på ett sätt som uppdaterar kontroller på en flik påverkar några av kontrollerna hos andra.

Om uppdateringen av de andra flikarna tar tid tar användaren kan inte kontinuerligt använda den aktuella fliken utan att händelserna sätts i drift. Detta kan frysta användargränssnittet, till användarens missnöje.

Eftersom en användare inte kommer att se de andra flikarna när du fyller i en aktuell kan du uppdatera kontrollerna för de andra flikarna i en bakgrundstråd. På så sätt kan användaren fortsätta använda den aktuella fliken som han fyller i, utan att någon av dess skript blockeras av uppdateringsprocessen av kontroller i andra flikar.

På samma sätt, om du hittar ett scenario där ett skript kan blockera en användare från att använda användargränssnittet tills dess genomförande är klar kan du överväga att flytta den till en arbetstråd, så att den kan utföras i bakgrunden.

Omfattningar och typer av arbetare

Webbansvariga API är förmodligen ett av de enklaste API-erna att arbeta med. Det har ganska enkla metoder att skapa arbetstrådar och kommunicera med dem från huvudskriptet.

Den globala räckvidden för en arbetstråd ligger i ett annat sammanhang från huvudgängan. Du kan inte komma åt metoderna och egenskaperna hos fönster objekt som varna() inuti en arbetstråd. Du med kan inte ändra DOM direkt från en arbetstråd.

Men du kan Använd många API: er som omfattas av fönster, till exempel Löfte och Hämta, i din arbetstråd (se hela listan).

Du kan också ha nestade arbetstrådar: arbetstrådar skapade från en annan arbetstråd. En arbetare skapad av en annan kallas a subworker.

Det finns också många typer av arbetarna. De två viktigaste är dedikerade och delade arbetstagare.

Dedikerade arbetstagare tillhör samma webbläsarkontext att deras huvudgänga hör till. Delade arbetstagare är dock presenteras i ett annat bläddringssammanhang (till exempel i en iframe) från huvudskriptet. I båda fallen är huvudskriptet och arbetarna måste vara i samma domän.

Exemplet i denna handledning kommer att vara om dedikerad arbetare, vilket är den vanligaste typen.

API-metoder

Se nedanstående diagram för a snabb översikt över alla huvudmetoder som utgör Web Workers API.

De Arbetstagare() konstruktör skapar en dedikerad arbetstråd och returnerar sitt referensobjekt. Sedan använder vi det här objektet för att kommunicera med den specifika arbetaren.

De skicka meddelande() Metoden används i både huvud- och arbetskript till skicka data till varandra. Den sända data mottas sedan på andra sidan av onMessage händelsehanterare.

De avsluta() metod avslutar en arbetstråd från huvudskriptet. Denna uppsägning är omedelbar: Alla aktuella skriptexekvering och pågående skript kommer att avbrytas. De stänga() Metoden gör detsamma, men det är det kallas av arbetstagarens trådlåsning.

Exempel kod

Nu, låt oss se några exempelkod. De index.html sidan rymmer huvudskript inuti a

Vi börjar med skapandet av arbetstråden från huvudskriptet.

  w = ny arbetare ("worker.js"); 
 De Arbetstagare() konstruktör tar URL-adressen till arbetstagarfilen som sitt argument.
 Sedan lägger vi till en händelsehanterare för onMessage händelse av den nybildade arbetstagarens förekomst till ta emot data från den. De data egenskapen hos e händelsen kommer att innehålla mottagna data.
  w = ny arbetare ("worker.js"); w.onmessage = (e) => console.log ('Mottaget från arbetstagare: $ e.data');  
 Nu använder vi skicka meddelande() till skicka några data till arbetstråden på ett knapptryck. De skicka meddelande() Metoden kan ta två argument. Den första kan vara av vilken typ som helst (sträng, array ...). Det är uppgifterna att skickas till arbetstråden (eller till huvudskriptet, när metoden är närvarande i arbetstråden).
 Den andra valfria parametern är en rad objekt som kan användas av arbetstrådarna (men inte av huvudskriptet eller vice versa). Sådana objekt kallas Överförbar objekt.
  document.querySelector ('button'). onclick = () => w.postMessage ('John');  
 Jag skickar bara ett strängvärde till arbetstråden.
 I arbetstråden måste vi lägga till en onMessage händelse hanterar det kommer att få data skickas till det genom huvudskriptet på knappen klicka. Inuti handlaren, vi sammanlänka den mottagna strängen med en annan och skicka resultatet tillbaka till huvudskriptet.
  console.info ("skapad arbetare"); onmessage = (e) => postMessage ('Hi $ e.data');  
 Till skillnad från i huvudskriptet där vi var tvungna att använda w referensobjekt till hänvisa till den specifika arbetartråden på vilket manuset använder sig av onMessage och skicka meddelande metoder finns det inget behov av ett referensobjekt i arbetstråden att peka på huvudgängan.
 Koden fungerar som följer. När webbläsaren laddas index.html, konsolen kommer att visa "arbetare skapad" meddelande så snart som arbetstagare() konstruktorn exekveras i huvudgängan, skapa en ny arbetare.
 När du klickar på knappen på sidan får du "Mottagen från arbetare: Hej John" meddelande i konsolen, vilket är den sträng som var sammanfogade i arbetstråden med de data som skickades till den, och då var skickas tillbaka till huvudskriptet.