Har du nogensinde haft brug for at køre kode i browseren, der tog så lang tid at køre din applikation, blev ikke reagerer i et stykke tid? Med HTML5-webarbejdere behøver du aldrig opleve det igen.

Webarbejdere giver dig mulighed for at adskille langvarig kode og køre den uafhængigt af anden kode, der kører på siden. Dette holder din brugergrænseflade responsiv, selv under komplekse operationer.

Hvad er webarbejdere?

Traditionelt er JavaScript et enkelttrådet sprog. Det betyder, at intet andet kan køre, mens et stykke kode kører. For eksempel, hvis du har kode, der forsøger at animere et DOM-element, skal kode, der forsøger at ændre en variabel, vente på, at animationen slutter, før den kan køre.

Webarbejdere er JavaScript-filer, der udføres i en separat tråd uden direkte adgang til DOM.

En måde at tænke på webarbejdere er, at de er stykker kode, der tager meget tid at køre, så du giver dem til browseren, så de kan køre i baggrunden. Da denne kode nu kører i baggrunden, påvirker den ikke den JavaScript, der er ansvarlig for din webside.

instagram viewer

Som en bivirkning kan den ikke længere interagere direkte med resten af ​​din kode, så webarbejdere har ingen adgang til DOM. Men mange andre browser-API'er er stadig tilgængelige, inklusive WebSocket og Fetch API'er.

Webarbejdere er dog ikke helt isoleret fra hovedtråden. Når en arbejder skal kommunikere med hovedtråden, kan den sende en besked, og hovedtråden kan sende sin egen besked som svar.

Hvorfor webarbejdere?

Før webarbejdere var den eneste måde at køre JavaScript på, der krævede meget tid i browseren enten:

  • Accepter, at siden ikke vil reagere i et stykke tid.
  • Bryd den kode ind asynkrone bidder.

Da en side, der ikke reagerer, normalt er en dårlig brugeroplevelse, kan du vælge den asynkrone mulighed. At skrive kode på denne måde betyder at dele den op i mindre stykker, som browseren kan køre, mens den ikke håndterer brugergrænsefladen. Brikkerne skal være små nok til, at hvis brugergrænsefladen skal opdateres, kan browseren afslutte udførelsen af ​​det aktuelle stykke og tage sig af brugergrænsefladen.

Webarbejdere blev føjet til HTML5 for at tilbyde en bedre løsning på dette problem. I stedet for at tvinge dig til at være kreativ med asynkron kode, giver de dig mulighed for rent at adskille en funktion til at køre i sin egen isolerede tråd.

Dette gjorde det lettere for udviklere at skrive sådan kode og forbedrede også brugerens oplevelse.

Use Cases for Web Workers

Enhver applikation, der kræver meget beregning på klientsiden, kan drage fordel af webarbejdere.

Lad os sige, at din applikation for eksempel ønsker at generere en brugsrapport, og den gemmer alle data om klienten af ​​hensyn til privatlivets fred.

For at generere denne rapport skal din webapplikation hente dataene, køre beregninger på dem, organisere resultaterne og præsentere dem for brugeren.

Hvis du forsøgte at gøre det i hovedtråden, ville brugeren være fuldstændig ude af stand til at bruge applikationen, mens applikationen behandlede dataene. I stedet kan du flytte noget af eller hele koden til en webarbejder. Dette giver brugeren mulighed for at fortsætte med at bruge applikationen, mens beregningerne udføres.

Sådan bruges Web Workers i JavaScript

Det Web Worker API definerer, hvordan man bruger webarbejdere. Brug af denne API involverer oprettelse af et Worker-objekt med Worker-konstruktøren som denne:

lad newWorker = Worker('worker.js');

Det Arbejder constructor accepterer navnet på en JavaScript-fil som dens parameter og kører filen i en ny tråd. Det returnerer et Worker-objekt for at tillade hovedtråden at interagere med arbejdertråden.

Arbejdere interagerer med hovedtråden ved at sende beskeder frem og tilbage. Du bruger postBesked funktion til at sende hændelser mellem arbejderen og hovedtråden. Brug en besked begivenhedslytter for at lytte efter beskeder fra den anden part.

Her er et kodeeksempel. For det første kan en hovedtråd se sådan ud:

lade arbejder = ny Worker('worker.js')
worker.postMessage('Hej!')
worker.onmessage = fungere(e) {
 console.log('Arbejder tråd siger', e.data)
}

Denne hovedtråd opretter et arbejderobjekt fra worker.js og sender derefter en besked til det med worker.postMessage. Det definerer derefter en begivenhedslytter, der i koncept ligner en DOM-begivenhedslytter. En hændelse udløses, hver gang arbejderen sender en besked tilbage til hovedtråden, og behandleren logger arbejderens besked til konsollen.

Koden inde i arbejderen (worker.js) har ét job:

onmessage = fungere(e) {
lade besked = e.data;
 console.log('Hovedtråd sagt', besked);
 postBesked('Hej!')
}

Den lytter efter meddelelser sendt fra hovedtråden, logger meddelelsen til konsollen og sender en returmeddelelse tilbage til hovedtråden.

Beskederne i dette eksempel har alle været strenge, men det er ikke et krav: du kan sende næsten alle typer data som en besked.

Den slags arbejdere, du hidtil har set, kaldes dedikerede arbejdere. Du kan kun få adgang til dem fra den fil, du oprettede dem i (de er dedikeret til det). Delte arbejdere er det modsatte: de kan modtage beskeder fra og sende beskeder til flere filer. Delte arbejdere er konceptuelt det samme som dedikerede arbejdere, men du skal bruge dem lidt anderledes.

Lad os se på et eksempel. I stedet for at bruge Worker-konstruktøren skal hver fil, der ønsker at bruge en delt arbejder, oprette et arbejderobjekt ved hjælp af SharedWorker():

lade sharedWorker = ny SharedWorker('worker.js')

Forskellene stopper dog ikke der. For at en fil kan sende eller modtage en besked fra en delt arbejder, skal den gøre det ved at få adgang til en Havn objekt, i stedet for at gøre det direkte. Sådan ser det ud:

sharedWorker.port.postMessage('Hej!')
sharedWorker.port.onMessage = fungere(e) {
 console.log('Den delte arbejder sendte'e. data);
}

Du skal også bruge portobjektet inde i arbejderen:

onconnect = fungere(e) {
konst port = e.ports[0];
port.onmessage = fungere(e) {
 console.log('Besked modtaget', e.data)
 port.postMessage('Hej!');
 }
}

Det onconnect lytteren udløses hver gang en forbindelse til en port sker (når en en besked begivenhedslytter er sat op i hovedtråden).

Når det sker, henter koden den port, der lige var forbundet til fra forbindelseshændelsen og gemmer den i en variabel. Dernæst registrerer koden en besked lytter på portobjektet. Koden logger derefter beskeden til konsollen og bruger porten til at sende en besked tilbage til hovedtråden.

Webarbejdere forbedrer brugeroplevelsen

Webarbejdere er JavaScript-tråde, der giver dig mulighed for at køre komplekse og langvarige stykker kode i baggrunden. Denne kode vil så undgå at blokere brugergrænsefladen. Brug af webarbejdere gør det meget nemmere at skrive denne type kode og forbedrer oplevelsen for brugeren af ​​applikationen. Du kan oprette webarbejdere og interagere med dem ved hjælp af webworker API.