En introduktion til Web Workers JavaScript API

Webarbejdere er en JavaScript API, der giver dig mulighed for Kør scripts i en separat tråd fra den primære. Det kan være nyttigt, når du ikke vil have nogen hindring i udførelsen af hovedskripterne på grund af baggrundsspecifikke scripts.

Webarbejds API er understøttes i næsten alle browsere, For mere detaljerede oplysninger, se på CanIUse-dokumenterne. Før vi kommer ind i koden, lad os se et par scenarier, hvor du måske vil bruge dette API, så du kan få en ide om hvad jeg mente med baggrundsspecifikke scripts.

Brug sager

Lad os sige, at der er et script der henter og behandler en fil. Hvis en fil er betydeligt stor det tager lang tid at blive behandlet! Som kan stoppe andre scripts, der blev påberåbt senere fra at blive henrettet.

Men hvis Filbehandling er flyttet til en baggrundstråd, kendt som arbejdstråd, Andre begivenheder vil ikke blive blokeret, før den første er forbi.

Manuskriptet henrettet i en baggrundsarbejder tråd er kendt som arbejdstager script eller bare arbejder.

For et andet eksempel, forestil dig, at der er en stor form, arrangeret i faner. Det er skrevet på en måde, der opdaterer kontroller i en fane påvirker nogle af kontrollerne i andre.

Hvis opdateringen af de andre faner tager brugeren tid kan ikke løbende bruge den aktuelle fane uden at dets begivenheder bliver sat på vent. Dette kan fryse brugergrænsefladen til brugerens forfærdelse.

Da en bruger ikke vil se de andre faner, mens du udfylder en nuværende, kan du Opdater kontrollerne for de andre faner i en baggrundstråd. På den måde kan brugeren fortsætte med at bruge den aktuelle fane, han udfylder, uden at nogen af dens scripts bliver blokeret af opdateringsprocessen af kontroller i andre faner.

Ligeledes, hvis du finder et scenario, hvor et script kan blokere en bruger fra at bruge brugergrænsefladen Indtil udførelsen er færdig, kan du overveje at flytte den til en arbejdstråd, så den kunne udføres i baggrunden.

Omfang og typer af arbejdere

Webarbejds-API'en er nok et af de enkleste API'er til at arbejde med. Det har ret enkle metoder til oprette arbejdstråde og kommunikere med dem fra hovedskriptet.

Det globale omfang af en arbejdstråd er i en anden sammenhæng fra hovedtråden. Du kan ikke få adgang til metoder og egenskaber af vindue objekt såsom alert() inde i en arbejdstråd tråd. Også dig kan ikke ændre DOM direkte fra en arbejdstråd tråd.

Men du kan Brug mange API'er, der kommer under vindue, for eksempel Løfte og Hent, i din medarbejder tråd (se den fulde liste).

Du kan også have nestede arbejder tråde: arbejdstråde skabt af en anden arbejdstråd. En arbejdstager skabt af en anden hedder a subworker.

Der er også mange typer af arbejdstagerne. De to vigtigste er dedikerede og delte arbejdere.

Dedikerede arbejdstagere tilhører den samme browser kontekst at deres hovedtråd tilhører. Fælles arbejdstagere er dog til stede i en anden browsing-kontekst (for eksempel i en iframe) fra hovedskriptet. I begge tilfælde er hovedskriften og arbejderne skal være i samme domæne.

Eksemplet i denne tutorial vil være om dedikeret medarbejder, som er den mest almindelige type.

API metoder

Se nedenstående diagram for a Hurtigt overblik over alle de vigtigste metoder der udgør webarbejds-API'en.

Det Arbejder() konstruktør skaber en dedikeret arbejdstråd og returnerer sit referenceobjekt. Så bruger vi dette objekt til at kommunikere med den pågældende medarbejder.

Det postMessage () Metoden bruges i både hoved- og arbejdskriptet til send data til hinanden. De sendte data modtages herefter på den anden side af onmessage hændelseshandler.

Det opsige() metode Afslutter en arbejdstråd fra hovedskriptet. Denne opsigelse er umiddelbar: Enhver eksisterende scriptudførelse og afventer scripts vil blive annulleret. Det tæt() Metoden gør det samme, men det er kaldet af arbejdstagerens trådlåsning.

Eksempelkode

Lad os nu se nogle prøvekode. Det index.html side besidder hovedskript inde i a

Vi starter med oprettelse af arbejdstrådens tråd fra hovedskriptet.

  w = nyarbejder ('worker.js'); 
 Det Arbejder() konstruktør tager URL'en til medarbejderfilen som sit argument.
 Derefter tilføjer vi en hændelseshandler til onmessage begivenhed af den nyoprettede arbejdstager forekomst til modtag data fra den. Det data ejendom af e hændelsen vil indeholde de modtagne data.
  w = nyarbejder ('worker.js'); w.onmessage = (e) => console.log ('Modtaget fra arbejdstager: $ e.data');  
 Nu bruger vi postMessage () til send nogle data til arbejdstrådens tråd på et klik. Det postMessage () Metoden kan tage to argumenter. Den første kan være af en hvilken som helst type (streng, array ...). Det er dataene at blive sendt til arbejdstrådens tråd (eller til hovedskriptet, når metoden er til stede i arbejdstrådens tråd).
 Den anden valgfrie parameter er en række objekter, som kan bruges af arbejdstrådene (men ikke ved hovedskriptet eller omvendt). Disse slags objekter hedder overdrages objekter.
  document.querySelector ('knap'). onclick = () => w.postMessage ('john');  
 Jeg sender bare en strengværdi til arbejdstrådens tråd.
 I arbejdetråden skal vi tilføje en onmessage hændelse handler det vil modtage dataene sendt til det ved hovedskriptet på knappen klik. Inde i handleren, vi sammenkæd den modtagne streng med en anden og send resultatet tilbage til hovedskriptet.
  console.info ('arbejdstager oprettet'); onmessage = (e) => postMessage ('Hi $ e.data');  
 I modsætning til i hovedskriptet, hvor vi skulle bruge w reference objekt til Se den specifikke arbejdstråd hvorpå scriptet bruger den onmessage og postMessage metoder, der er Intet behov for et referenceobjekt i arbejdstrådens tråd at pege på hovedtråden.
 Koden fungerer som følger. Når browseren indlæser index.html, konsollen vil vise "arbejder skabt" besked så snart som arbejder() Konstruktøren udføres i hovedtråden, skabe en ny medarbejder.
 Når du klikker på knappen på siden, får du den "Modtaget fra arbejderen: Hej John" besked i konsollen, hvilket er den streng, der var sammenkædet i arbejdstrådens tråd med dataene sendt til det, og så var sendt tilbage til hovedskriptet.