JavaScript-programmerere er vant til å falske parallellisme, men det er en måte å oppnå ekte parallellisme du bør bruke akkurat nå.

JavaScript kan slite med ytelsesintensive oppgaver fordi det er et enkelt-tråds språk. Ved å bruke parallellitet kan du oppnå flertrådskjøring i JavaScript og forbedre ytelsen og responsen til de moderne nettappene dine.

Parallellisme i JavaScript-programmering

Parallellisme er avgjørende i moderne databehandling for å forbedre ytelse og skalerbarhet. Den gjør dette ved å effektivt utnytte tilgjengelige ressurser.

En vanlig teknikk som brukes for å oppnå parallellitet i programmering er multi-threading. JavaScript-tråden er imidlertid et enkelttrådssystem og kan bare håndtere én oppgave om gangen. Dette betyr at den ikke er kjent med parallelle programkjøringer.

JavaScript forfalsker parallell programmering

En vanlig misforståelse om parallellitet er at du kan oppnå det ved å bruke asynkron programmeringsteknikker som asynkron/avvent, tilbakeringinger og løfter:

instagram viewer
// Async/await-funksjon som simulerer en nettverksforespørsel
asynkronfunksjonhenteData() {
konst svar = avvente hente();
konst data = avvente response.json();
komme tilbake data;
}

// Tilbakeringingsfunksjon som logger hentede data til konsollen
funksjonlogData(data) {
konsoll.log (data);
}

// Promise.all() metode som utfører flere løfter parallelt
Love.alle([
fetchData(),
fetchData(),
]).deretter((resultater) => {
konsoll.log (resultater);
});

// Kall opp fetchData-funksjonen og send logData-funksjonen som en tilbakeringing
fetchData().then (logData);

Disse teknikkene kjører faktisk ikke kode parallelt. JavaScript bruker hendelsessløyfen til å etterligne parallell programmering innenfor enkelttrådsdesignet.

Hendelsesløkken er en grunnleggende del av JavaScript-kjøretidsmiljøet. Den lar deg utføre asynkrone operasjoner, for eksempel nettverksforespørsler, i bakgrunnen uten å blokkere hovedtråden.

Hendelsesløkken sjekker hele tiden etter nye hendelser eller oppgaver i en kø og utfører dem én etter én sekvensielt. Denne teknikken lar JavaScript oppnå samtidighet og teoretisk parallellitet.

Samtidighet vs. Parallellisme

Samtidighet og parallellisme blir ofte misforstått og utvekslet i JavaScript-verdenen.

Samtidighet i JavaScript refererer til muligheten til å utføre flere oppgaver ved å overlappe utførelsen av oppgavene. Der en oppgave kan starte før en annen fullfører, men oppgavene kan verken starte eller slutte samtidig. Dette gjør det mulig for JavaScript å håndtere operasjoner effektivt, for eksempel å hente data fra en REST API eller lese filer, uten å blokkere hovedutførelsestråden.

Parallelisme, derimot, refererer til muligheten til å utføre flere oppgaver samtidig på tvers av flere tråder. Disse bakgrunnstrådene kan utføre oppgaver uavhengig og samtidig. Dette åpner for muligheter for å oppnå ekte parallellitet i JavaScript-applikasjoner.

JavaScripts applikasjoner kan oppnå ekte parallellitet gjennom bruken av Web Workers.

Webarbeidere introduserer parallellisme til JavaScript

Web Workers er en funksjon i moderne nettlesere som lar JavaScript-kode kjøres i bakgrunnstråder, atskilt fra hovedutførelsestråden. I motsetning til hovedtråden, som håndterer brukerinteraksjoner og UI-oppdateringer. Webarbeideren vil være dedikert til å utføre beregningsintensive oppgaver.

Nedenfor er en diagramrepresentasjon av driften av en Web Worker i JavaScript.

Hovedtråden og Web Worker kan kommunisere ved hjelp av meldingsoverføring. Bruker postmelding metode for å sende meldinger og en melding hendelsesbehandler for å motta meldinger, kan du sende instruksjoner eller data frem og tilbake.

Opprette en nettarbeider

For å opprette en Web Worker, må du opprette en separat JavaScript-fil.

Her er et eksempel:

// main.js

// Opprett en ny Web Worker
konst arbeider = ny Arbeider('worker.js');

// Send en melding til Web Worker
worker.postMessage('Hei fra hovedtråden!');

// Lytt etter meldinger fra Web Worker
worker.onmessage = funksjon(begivenhet) {
konsoll.Logg("Mottatt melding fra Web Worker:", event.data);
};

Eksemplet ovenfor oppretter en ny Web Worker ved å sende banen til arbeiderskriptet (worker.js) som et argument til Arbeider konstruktør. Du kan sende en melding til Web Worker ved å bruke postmelding metoden og lytt etter meldinger fra Web Worker ved å bruke en melding hendelsesbehandler.

Du bør da lage arbeidsskriptet (worker.js) fil:

// worker.js

// Lytt etter meldinger fra hovedtråden
self.onmessage = funksjon(begivenhet) {
konsoll.Logg('Mottatt melding fra hovedtråden:', event.data);

// Send en melding tilbake til hovedtråden
self.postMessage("Hei fra worker.js!");
};

Web Worker-skriptet lytter etter meldinger fra hovedtråden ved å bruke en melding hendelsesbehandler. Når du mottar en melding, logger du ut meldingen inne hendelsesdata og send en ny melding til hovedtråden med postmelding metode.

Utnytte parallellisme med nettarbeidere

Den primære brukssaken for Web Workers er å utføre beregningsintensive JavaScript-oppgaver parallelt. Ved å overføre disse oppgavene til Web Workers kan du oppnå betydelige ytelsesforbedringer.

Her er et eksempel på bruk av en nettarbeider til å utføre en tung beregning:

// main.js

konst arbeider = ny Arbeider('worker.js');

// Send data til Web Worker for beregning
worker.postMessage([1, 2, 3, 4, 5]);

// Lytt etter resultatet fra Web Worker
worker.onmessage = funksjon(begivenhet) {
konst resultat = hendelse.data;
konsoll.Logg('Beregningsresultat:', resultat);
};

Worker.js:

// Lytt etter data fra hovedtråden
self.onmessage = funksjon (begivenhet) {
konst tall = hendelse.data;

konst resultat = utføre HeavyCalculation (tall);

// Send resultatet tilbake til hovedtråden
self.postMessage (resultat);
};

funksjonutføre HeavyCalculation(data) {
// Utfør en kompleks utregning på arrayen av tall
komme tilbake data
.kart((Antall) =>Matte.pow (nummer, 3)) // Kube hvert tall
.filter((Antall) => Antall % 20) // Filtrer partall
.redusere((sum, tall) => sum + tall, 0); // Sum alle tall
}

I dette eksemplet sender du en rekke tall fra hovedtråden til Web Worker. Webarbeideren utfører beregningen ved å bruke den oppgitte serien med data og sender resultatet tilbake til hovedtråden. De utføre HeavyCalculation() funksjonen kartlegger hvert tall til sin kube, filtrerer ut partallene og summerer dem til slutt.

Begrensninger og hensyn

Mens Web Workers tilbyr en mekanisme for å oppnå parallellitet i JavaScript, er det viktig å vurdere noen få begrensninger og hensyn:

  • Ingen delt minne: Webarbeidere opererer i separate tråder og deler ikke minne med hovedtråden. Så de kan ikke få direkte tilgang til variabler eller objekter fra hovedtråden uten at meldingen sendes.
  • Serialisering og deserialisering: Når du sender data mellom hovedtråden og Web Workers, må du serialisere og deserialisere dataene siden meldingsoverføring er en tekstbasert kommunikasjon. Denne prosessen medfører en ytelseskostnad og kan påvirke den generelle ytelsen til appen.
  • Nettleserstøtte: Selv om Web Workers støttes godt i de fleste moderne nettlesere, kan enkelte eldre nettlesere eller begrensede miljøer ha delvis eller ingen støtte for Web Workers.

Oppnå ekte parallellisme i JavaScript

Parallellisme i JavaScript er et spennende konsept som muliggjør ekte samtidig utførelse av oppgaver, selv i et primært enkelt-tråds språk. Med introduksjonen av Web Workers kan du utnytte kraften til parallellitet og oppnå betydelige ytelsesforbedringer i JavaScript-applikasjonene dine.