En introduksjon til Web Workers JavaScript API

Webarbeidere er en JavaScript API som lar deg Kjør skript i en egen tråd fra hoveddelen. Det kan komme til nytte når du ikke vil ha noen hindring i utførelsen av hovedskriptene, på grunn av bakgrunnsspecifikke skript.

Webarbeideren API er støttes i nesten alle nettlesere, For mer detaljert informasjon, ta en titt på CanIUse-dokumentene. Før vi går inn i koden, la oss se et par scenarier hvor du kanskje vil bruke denne APIen, slik at du kan få en ide om hva jeg mente med bakgrunnsspecifikke skript.

Bruk saker

La oss si at det er et skript som henter og behandler en fil. Hvis en fil er betraktelig stor det tar lang tid å bli behandlet! Som kan stanse andre skript som ble påkalt senere fra å bli henrettet.

Men hvis Filbehandling blir flyttet til en bakgrunns tråd, kjent som arbeidstråd, Andre hendelser vil ikke bli blokkert før den tidligere er over.

Manuset utført i en bakgrunnsarbeiderstreng er kjent som arbeider skript eller bare arbeider.

For et annet eksempel, tenk det er en stor form, arrangert i faner. Det er skrevet på en måte som oppdaterer kontroller i en kategori påvirker noen av kontrollene i andre.

Hvis oppdateringen av de andre fanene tar litt tid brukeren kan ikke kontinuerlig bruke den nåværende kategorien uten at hendelsene blir satt på vent. Dette kan fryse brukergrensesnittet, til brukerens forferdelse.

Siden en bruker ikke vil se de andre kategoriene mens du fyller ut en nåværende, kan du oppdater kontrollene til de andre kategoriene i en bakgrunnstråd. På denne måten kan brukeren fortsette å bruke den nåværende kategorien han fyller ut, uten at noen av sine skript blir blokkert av oppdateringsprosessen av kontroller i andre faner.

På samme måte, hvis du finner et scenario der et skript kan blokkere en bruker fra å bruke brukergrensesnittet inntil gjennomføringen er ferdig, kan du vurdere å flytte den til en arbeidstråd, slik at den kan bli utført i bakgrunnen.

Omfang og typer arbeidstakere

Webarbeidere-API er trolig en av de enkleste API-ene for å jobbe med. Den har ganske enkle metoder til opprett arbeidstråder og kommuniser med dem fra hovedskriptet.

Det globale omfanget av en arbeidstråd er i en annen kontekst fra hovedtråden. Du kan ikke få tilgang til metodene og egenskapene til vindu gjenstand som for eksempel varsling() inne i en arbeiderråd. Du også kan ikke endre DOM direkte fra en arbeidstrådstreng.

Men du kan bruk mange APIer som kommer under vindu, for eksempel Love og Fetch, i din arbeider tråd (se hele listen).

Du kan også ha nestede arbeider tråder: Arbeiderstrenger opprettet fra en annen arbeidstråd. En arbeidstaker som er opprettet av en annen, kalles a subworker.

Det er også mange typer av arbeidstakere. De to viktigste er dedikert og delt arbeidstakere.

Dedikerte arbeidstakere tilhører samme surfekontekst at deres hovedtråd tilhører. Delt arbeidere er imidlertid presentere i en annen surfekontekst (for eksempel i en iframe) fra hovedskriptet. I begge tilfeller er hovedskriptet og arbeiderne må være i samme domene.

Eksemplet i denne opplæringen vil være om dedikert arbeidstaker, som er den vanligste typen.

API-metoder

Se nedenstående diagram for a rask oversikt over alle hovedmetoder som utgjør Web Workers API.

De Arbeider() konstruktør skaper en dedikert arbeidstråd og returnerer referanseobjektet. Da bruker vi dette objektet til å kommunisere med den bestemte arbeideren.

De postmessage () Metoden brukes i både hoved- og arbeiderskriptene til send data til hverandre. De sendte dataene mottas da på den andre siden av onmessage hendelseshåndterer.

De terminere() metode avslutter en arbeidstråd fra hovedskriptet. Denne oppsigelsen er umiddelbar: En hvilken som helst gjeldende scriptutførelse og ventende skript vil bli kansellert. De Lukk() Metoden gjør det samme, men det er det kalt av arbeiderens trådavslutning selv.

Eksempelkode

Nå, la oss se noen prøvekode. De index.html side holder hovedskript inne i a

Vi starter med Opprettelse av arbeidstrådens tråd fra hovedskriptet.

  w = ny arbeider ('worker.js'); 
 De Arbeider() konstruktør tar nettadressen til arbeiderfilen som argument.
 Deretter legger vi til en hendelseshåndterer for onmessage hendelsen til den nyopprettede arbeidstaker forekomsten til motta data fra den. De data eiendom av e hendelsen vil holde mottatte data.
  w = ny arbeider ('worker.js'); w.onmessage = (e) => console.log ('Mottatt fra arbeidstaker: $ e.data');  
 Nå bruker vi postmessage () til send noen data til arbeidstrådens tråd på et tastetrykk. De postmessage () Metoden kan ta to argumenter. Den første kan være av hvilken som helst type (streng, array ...). Det er dataene å bli sendt til arbeideren tråden (eller til hovedskriptet, når metoden er tilstede i arbeidstrådens tråd).
 Den andre valgfrie parameteren er en rekke objekter som kan brukes av arbeidstrådene (men ikke av hovedskriptet, eller omvendt). Disse typer objekter kalles overførbar objekter.
  document.querySelector ('button'). onclick = () => w.postMessage ('John');  
 Jeg sender bare en strengverdi til arbeiderens tråd.
 I arbeidstrådens tråden må vi legge til en onmessage hendelsen håndterer det vil motta dataene sendt til det ved hovedskriptet på knappeklikk. Inne i handleren, vi sammenkoble mottatt streng med en annen og send resultatet tilbake til hovedskriptet.
  console.info ('arbeidstaker opprettet'); onmessage = (e) => postMessage ('Hei $ e.data');  
 I motsetning til hovedskriptet der vi måtte bruke w referanseobjekt til referer til den spesifikke arbeidstråden som skriptet da bruker onmessage og postmessage metoder, det er det Det er ikke behov for et referansepunkt i arbeidstråden å peke på hovedtråden.
 Koden fungerer som følger. Når nettleseren laster index.html, konsollen vil vise "arbeider opprettet" melding så snart som arbeider() Konstruktøren utføres i hovedtråden, skaper en ny arbeidstaker.
 Når du klikker på knappen på siden, får du den "Mottatt fra arbeideren: Hei John" melding i konsollen, som er strengen som var sammenkoblet i arbeidstråden med dataene sendt til det, og da var det sendt tilbake til hovedskriptet.