Har du noen gang hatt behov for å kjøre kode i nettleseren som tok så lang tid å kjøre applikasjonen din, som ikke svarte på en stund? Med HTML5-nettarbeidere trenger du aldri å oppleve det igjen.

Nettarbeidere lar deg skille langvarig kode og kjøre den uavhengig av annen kode som kjører på siden. Dette holder brukergrensesnittet ditt responsivt, selv under komplekse operasjoner.

Hva er nettarbeidere?

Tradisjonelt er JavaScript et enkelt-tråds språk. Det betyr at ingenting annet kan kjøre mens ett stykke kode kjører. For eksempel, hvis du har kode som prøver å animere et DOM-element, må kode som prøver å endre en variabel vente til animasjonen avsluttes før den kan kjøres.

Nettarbeidere er JavaScript-filer som kjøres i en egen tråd uten direkte tilgang til DOM.

En måte å tenke på nettarbeidere er at de er kodebiter som tar mye tid å kjøre, så du gir dem til nettleseren for å kjøre dem i bakgrunnen. Siden den koden nå kjører i bakgrunnen, påvirker den ikke JavaScript som er ansvarlig for nettsiden din.

instagram viewer

Som en bieffekt kan den ikke lenger samhandle direkte med resten av koden din, så nettarbeidere har ikke tilgang til DOM. Imidlertid er mange andre nettleser-APIer fortsatt tilgjengelige, inkludert WebSocket- og Fetch-API-ene.

Nettarbeidere er imidlertid ikke helt isolert fra hovedtråden. Når en arbeider trenger å kommunisere med hovedtråden, kan den sende en melding og hovedtråden kan sende sin egen melding som svar.

Hvorfor nettarbeidere?

Før nettarbeidere var den eneste måten å kjøre JavaScript på som krevde mye tid i nettleseren enten:

  • Godta at siden ikke vil svare på en stund.
  • Bryt den koden inn asynkrone biter.

Siden en side som ikke reagerer vanligvis er en dårlig brukeropplevelse, kan du velge det asynkrone alternativet. Å skrive kode på denne måten betyr å dele den opp i mindre biter som nettleseren kan kjøre mens den ikke håndterer brukergrensesnittet. Brikkene må være små nok til at hvis brukergrensesnittet trenger oppdatering, kan nettleseren fullføre utføringen av gjeldende del og ivareta brukergrensesnittet.

Webarbeidere ble lagt til HTML5 for å tilby en bedre løsning på dette problemet. I stedet for å tvinge deg til å være kreativ med asynkron kode, lar de deg enkelt skille en funksjon for å kjøre i sin egen isolerte tråd.

Dette gjorde det lettere for utviklere å skrive slik kode og forbedret også brukeropplevelsen.

Brukssaker for nettarbeidere

Enhver applikasjon som krever mye beregning på klientsiden kan dra nytte av nettarbeidere.

Si for eksempel at applikasjonen din ønsker å generere en bruksrapport, og den lagrer alle data om klienten av hensyn til personvern.

For å generere denne rapporten må nettapplikasjonen din hente dataene, kjøre beregninger på den, organisere resultatene og presentere dem for brukeren.

Hvis du prøvde å gjøre det i hovedtråden, ville brukeren være fullstendig ute av stand til å bruke applikasjonen mens applikasjonen behandlet dataene. I stedet kan du flytte noe eller hele koden til en nettarbeider. Dette lar brukeren fortsette å bruke applikasjonen mens beregningene utføres.

Hvordan bruke Web Workers i JavaScript

De Web Worker API definerer hvordan webarbeidere skal brukes. Å bruke denne API-en innebærer å lage et Worker-objekt med Worker-konstruktøren slik:

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

De Arbeider konstruktør godtar navnet på en JavaScript-fil som parameter og kjører filen i en ny tråd. Den returnerer et Worker-objekt for å la hovedtråden samhandle med arbeidertråden.

Arbeidere samhandler med hovedtråden ved å sende meldinger frem og tilbake. Du bruker postmelding funksjon for å sende hendelser mellom arbeideren og hovedtråden. Bruke en melding hendelseslytter for å lytte etter meldinger fra den andre parten.

Her er et kodeeksempel. For det første kan en hovedtråd se slik ut:

la arbeider = ny Worker('worker.js')
worker.postMessage('Hei!')
worker.onmessage = funksjon(e) {
 console.log('Arbeidstråd sier', e.data)
}

Denne hovedtråden oppretter et arbeiderobjekt fra worker.js, og sender deretter en melding til det med worker.postMessage. Den definerer deretter en hendelseslytter, som i konsept ligner en DOM-hendelseslytter. En hendelse utløses hver gang arbeideren sender en melding tilbake til hovedtråden, og behandleren logger arbeiderens melding til konsollen.

Koden inne i arbeideren (worker.js) har én jobb:

onmelding = funksjon(e) {
la melding = e.data;
 console.log('Hovedtråd sa', beskjed);
 postmelding('Hei!')
}

Den lytter etter meldinger sendt fra hovedtråden, logger meldingen til konsollen og sender en returmelding tilbake til hovedtråden.

Meldingene i dette eksemplet har alle vært strenger, men det er ikke et krav: du kan sende nesten alle typer data som en melding.

Den typen arbeidere du har sett så langt kalles dedikerte arbeidere. Du kan bare få tilgang til dem fra filen du opprettet dem i (de er dedikert til det). Delte arbeidere er det motsatte: de kan motta meldinger fra, og sende meldinger til, flere filer. Delte arbeidere er konseptuelt det samme som dedikerte arbeidere, men du må bruke dem litt annerledes.

La oss se på et eksempel. I stedet for å bruke Worker-konstruktøren, må hver fil som ønsker å bruke en delt arbeider opprette et arbeiderobjekt ved å bruke SharedWorker():

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

Forskjellene stopper imidlertid ikke der. For at en fil skal sende eller motta en melding fra en delt arbeider, må den gjøre det ved å gå til en havn objekt, i stedet for å gjøre det direkte. Slik ser det ut:

sharedWorker.port.postMessage('Hei der!')
sharedWorker.port.onMessage = funksjon(e) {
 console.log('Den delte arbeideren sendte'e.data);
}

Du må bruke portobjektet inne i arbeideren også:

onconnect = funksjon(e) {
konst port = e.ports[0];
port.onmessage = funksjon(e) {
 console.log('Melding mottatt', e.data)
 port.postMessage('Hallo!');
 }
}

De koble til lytteren starter hver gang en tilkobling til en port skjer (når en en melding hendelseslytter er satt opp i hovedtråden).

Når det skjer, henter koden porten som nettopp ble koblet til fra connect-hendelsen og lagrer den i en variabel. Deretter registrerer koden en melding lytter på portobjektet. Koden logger deretter meldingen til konsollen, og bruker porten til å sende en melding tilbake til hovedtråden.

Webarbeidere forbedrer brukeropplevelsen

Nettarbeidere er JavaScript-tråder som lar deg kjøre komplekse og langvarige kodebiter i bakgrunnen. Denne koden vil da unngå å blokkere brukergrensesnittet. Bruk av webarbeidere gjør skriving av denne typen kode mye enklere, og forbedrer opplevelsen for brukeren av applikasjonen. Du kan opprette webarbeidere og samhandle med dem ved å bruke webworker API.