Har du någonsin behövt köra kod i webbläsaren som tog så lång tid att köra din applikation som inte svarade ett tag? Med HTML5 webbarbetare behöver du aldrig uppleva det igen.

Med webbarbetare kan du separera långvarig kod och köra den oberoende av annan kod som körs på sidan. Detta håller ditt användargränssnitt responsivt, även under komplexa operationer.

Vad är webbarbetare?

Traditionellt sett är JavaScript ett entrådigt språk. Det betyder att inget annat kan köras medan en kodbit körs. Till exempel, om du har kod som försöker animera ett DOM-element, måste kod som försöker ändra en variabel vänta tills animeringen slutar innan den kan köras.

Web-arbetare är JavaScript-filer som körs i en separat tråd utan direkt åtkomst till DOM.

Ett sätt att tänka på webbarbetare är att de är kodbitar som tar mycket tid att köra, så du ger dem till webbläsaren för att köra dem i bakgrunden. Eftersom den koden nu körs i bakgrunden påverkar den inte JavaScriptet som ansvarar för din webbsida.

Som en bieffekt kan den inte längre interagera direkt med resten av din kod, så webbarbetare har ingen tillgång till DOM. Men många andra webbläsar-API: er är fortfarande tillgängliga, inklusive WebSocket och Fetch API: er.

instagram viewer

Webbanbetare är dock inte helt isolerade från huvudtråden. När en arbetare behöver kommunicera med huvudtråden kan den skicka ett meddelande och huvudtråden kan skicka sitt eget meddelande som svar.

Varför webbarbetare?

Före webbarbetare var det enda sättet att köra JavaScript som krävde mycket tid i webbläsaren antingen:

  • Acceptera att sidan inte svarar ett tag.
  • Bryt in den koden asynkrona bitar.

Eftersom en sida som inte svarar vanligtvis är en dålig användarupplevelse, kan du välja det asynkrona alternativet. Att skriva kod på detta sätt innebär att dela upp den i mindre bitar som webbläsaren kan köra medan den inte hanterar användargränssnittet. Delarna måste vara tillräckligt små för att om användargränssnittet behöver uppdateras, kan webbläsaren slutföra körningen av den aktuella biten och sköta användargränssnittet.

Web-arbetare lades till HTML5 för att erbjuda en bättre lösning på detta problem. Istället för att tvinga dig att bli kreativ med asynkron kod låter de dig rengöra en funktion för att köras i sin egen isolerade tråd.

Detta gjorde det lättare för utvecklare att skriva sådan kod och förbättrade också användarens upplevelse.

Användningsfall för webbarbetare

Alla applikationer som kräver mycket beräkning på klientsidan kan dra nytta av webbarbetare.

Säg till exempel att din applikation vill generera en användningsrapport och den lagrar all data om klienten av integritetsskäl.

För att generera den rapporten måste din webbapplikation hämta data, köra beräkningar på den, organisera resultaten och presentera dem för användaren.

Om du försökte göra det i huvudtråden, skulle användaren vara helt oförmögen att använda applikationen medan applikationen bearbetade data. Istället kan du flytta en del av eller hela koden till en webbarbetare. Detta gör att användaren kan fortsätta använda applikationen medan beräkningarna utförs.

Hur man använder Web Workers i JavaScript

De Web Worker API definierar hur webbarbetare ska användas. Att använda detta API innebär att man skapar ett Worker-objekt med Worker-konstruktorn så här:

låt newWorker = Worker('worker.js');

De Arbetstagare konstruktorn accepterar namnet på en JavaScript-fil som dess parameter och kör filen i en ny tråd. Den returnerar ett Worker-objekt för att tillåta huvudtråden att interagera med arbetartråden.

Arbetare interagerar med huvudtråden genom att skicka meddelanden fram och tillbaka. Du använder skicka meddelande funktion för att skicka händelser mellan arbetaren och huvudtråden. Använd ett meddelande händelseavlyssnare för att lyssna efter meddelanden från den andra parten.

Här är ett kodexempel. Först kan en huvudtråd se ut så här:

låta arbetare = ny Worker('worker.js')
worker.postMessage('Hallå!')
worker.onmessage = fungera(e) {
 console.log('säger arbetartråden', e.data)
}

Den här huvudtråden skapar ett arbetarobjekt från worker.js och skickar sedan ett meddelande till det med worker.postMessage. Den definierar sedan en händelselyssnare, liknande konceptet till en DOM-händelseavlyssnare. En händelse aktiveras varje gång arbetaren skickar ett meddelande tillbaka till huvudtråden och hanteraren loggar arbetarens meddelande till konsolen.

Koden inuti arbetaren (worker.js) har ett jobb:

onmeddelande = fungera(e) {
låta meddelande = e.data;
 console.log('Huvudtråd sa', meddelande);
 skicka meddelande('Hej!')
}

Den lyssnar efter alla meddelanden som skickas från huvudtråden, loggar meddelandet till konsolen och skickar ett returmeddelande tillbaka till huvudtråden.

Meddelandena i det här exemplet har alla varit strängar, men det är inget krav: du kan skicka nästan alla typer av data som ett meddelande.

Den typen av arbetare du har sett hittills kallas dedikerade arbetare. Du kan bara komma åt dem från filen du skapade dem i (de är dedikerade till det). Delade arbetare är motsatsen: de kan ta emot meddelanden från och skicka meddelanden till flera filer. Delade arbetare är konceptuellt detsamma som dedikerade arbetare, men du måste använda dem lite annorlunda.

Låt oss titta på ett exempel. Istället för att använda Worker-konstruktorn måste varje fil som vill använda en delad arbetare skapa ett arbetarobjekt med SharedWorker():

låta sharedWorker = ny SharedWorker('worker.js')

Skillnaderna slutar dock inte där. För att en fil ska kunna skicka eller ta emot ett meddelande från en delad arbetare måste den göra det genom att komma åt en hamn objekt istället för att göra det direkt. Så här ser det ut:

sharedWorker.port.postMessage('Hallå där!')
sharedWorker.port.onMessage = fungera(e) {
 console.log('Den delade arbetaren skickade'e.data);
}

Du måste också använda portobjektet inuti arbetaren:

onconnect = fungera(e) {
konst port = e.ports[0];
port.onmessage = fungera(e) {
 console.log('Meddelande mottaget', e.data)
 port.postMessage('Hallå!');
 }
}

De onconnect lyssnaren avfyras varje gång en anslutning till en port sker (när en ett meddelande händelseavlyssnare ställs in i huvudtråden).

När det händer får koden porten som just var ansluten till från connect-händelsen och lagrar den i en variabel. Därefter registrerar koden ett meddelande lyssnare på portobjektet. Koden loggar sedan meddelandet till konsolen och använder porten för att skicka ett meddelande tillbaka till huvudtråden.

Web Workers förbättrar användarupplevelsen

Web-arbetare är JavaScript-trådar som låter dig köra komplexa och långvariga kodbitar i bakgrunden. Denna kod kommer då att undvika att blockera användargränssnittet. Att använda webbarbetare gör det mycket lättare att skriva den här typen av kod och förbättrar upplevelsen för användaren av applikationen. Du kan skapa webbarbetare och interagera med dem med hjälp av webworkers API.