JavaScript-programmører er vant til at falske parallelisme, men der er en måde at opnå ægte parallelisme på, som du burde bruge lige nu.

JavaScript kan kæmpe med præstationsintensive opgaver, fordi det er et enkelt-trådet sprog. Ved at bruge parallelitet kan du opnå multithreaded-udførelse i JavaScript og forbedre ydeevnen og reaktionsevnen af ​​dine moderne webapps.

Parallelisme i JavaScript-programmering

Parallelisme er afgørende i moderne computing for at forbedre ydeevne og skalerbarhed. Det gør den ved effektivt at udnytte de tilgængelige ressourcer.

En almindelig teknik, der bruges til at opnå parallelitet i programmering, er multi-threading. JavaScript-tråden er dog et enkelttrådssystem og kan kun håndtere én opgave ad gangen. Det betyder, at den ikke er bekendt med parallelle programudførelser.

JavaScript forfalsker parallel programmering

En almindelig misforståelse om parallelisme er, at du kan opnå det ved hjælp af asynkrone programmeringsteknikker som asynkron/vent, tilbagekald og løfter:

instagram viewer
// Async/await-funktion, der simulerer en netværksanmodning
asynkronfungerehenteData() {
konst svar = vente hente();
konst data = vente response.json();
Vend tilbage data;
}

// Tilbagekaldsfunktion, der logger de hentede data til konsollen
fungerelogdata(data) {
konsol.log (data);
}

// Promise.all() metode, der udfører flere løfter parallelt
Løfte.alle([
fetchData(),
fetchData(),
]).derefter((resultater) => {
konsol.log (resultater);
});

// Kald fetchData-funktionen og send logData-funktionen som et tilbagekald
fetchData().then (logData);

Disse teknikker udfører faktisk ikke kode parallelt. JavaScript bruger begivenhedsløkken til at efterligne parallel programmering inden for dets enkelttrådsdesign.

Hændelsesløkken er en grundlæggende del af JavaScript-runtime-miljøet. Det giver dig mulighed for at udføre asynkrone operationer, såsom netværksanmodninger, i baggrunden uden at blokere hovedtråden.

Hændelsesløkken tjekker konstant for nye hændelser eller opgaver i en kø og udfører dem én efter én sekventielt. Denne teknik gør det muligt for JavaScript at opnå samtidighed og teoretisk parallelitet.

Samtidighed vs. Parallelisme

Samtidighed og parallelisme bliver ofte misforstået og udvekslet i JavaScript-verdenen.

Samtidighed i JavaScript refererer til evnen til at udføre flere opgaver ved at overlappe udførelsen af ​​opgaverne. Hvor én opgave kan starte før en anden fuldfører, men opgaverne hverken kan starte eller slutte samtidigt. Dette gør det muligt for JavaScript at håndtere operationer effektivt, såsom at hente data fra en REST API eller læse filer uden at blokere hovedudførelsestråden.

Parallelisme henviser på den anden side til evnen til at udføre flere opgaver samtidigt på tværs af flere tråde. Disse baggrundstråde kan udføre opgaver uafhængigt og samtidigt. Dette åbner muligheder for at opnå ægte parallelitet i JavaScript-applikationer.

JavaScripts applikationer kan opnå ægte parallelitet igennem brugen af ​​Web Workers.

Webarbejdere introducerer parallelisme til JavaScript

Web Workers er en funktion i moderne webbrowsere, der tillader JavaScript-kode at køre i baggrundstråde, adskilt fra hovedudførelsestråden. I modsætning til hovedtråden, som håndterer brugerinteraktioner og UI-opdateringer. Webarbejderen vil være dedikeret til at udføre beregningsintensive opgaver.

Nedenfor er en diagramrepræsentation af driften af ​​en Web Worker i JavaScript.

Hovedtråden og Web Worker kan kommunikere ved hjælp af meddelelsesoverførsel. Bruger postBesked metode til at sende beskeder og en besked hændelseshandler til at modtage beskeder, kan du sende instruktioner eller data frem og tilbage.

Oprettelse af en webarbejder

For at oprette en Web Worker skal du oprette en separat JavaScript-fil.

Her er et eksempel:

// main.js

// Opret en ny Web Worker
konst arbejder = ny Arbejder('worker.js');

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

// Lyt efter beskeder fra Web Worker
worker.onmessage = fungere(begivenhed) {
konsol.log('Modtaget besked fra Web Worker:', event.data);
};

Ovenstående eksempel opretter en ny Web Worker ved at videregive stien til worker-scriptet (worker.js) som et argument for Arbejder konstruktør. Du kan sende en besked til Web Worker ved hjælp af postBesked metode og lyt efter beskeder fra Web Worker ved hjælp af en besked hændelseshandler.

Du skal derefter oprette arbejdsscriptet (worker.js) fil:

// worker.js

// Lyt efter beskeder fra hovedtråden
self.onbesked = fungere(begivenhed) {
konsol.log('Modtaget besked fra hovedtråden:', event.data);

// Send en besked tilbage til hovedtråden
self.postMessage("Hej fra worker.js!");
};

Web Worker-scriptet lytter efter beskeder fra hovedtråden ved hjælp af en besked hændelseshandler. Når du modtager en besked, logger du beskeden ud indeni hændelsesdata og send en ny besked til hovedtråden med postBesked metode.

Udnyttelse af parallelisme med webarbejdere

Den primære use case for Web Workers er at udføre beregningsintensive JavaScript-opgaver parallelt. Ved at overføre disse opgaver til Web Workers kan du opnå betydelige præstationsforbedringer.

Her er et eksempel på brug af en webarbejder til at udføre en tung beregning:

// main.js

konst arbejder = ny Arbejder('worker.js');

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

// Lyt efter resultatet fra Web Worker
worker.onmessage = fungere(begivenhed) {
konst resultat = begivenhed.data;
konsol.log('Beregningsresultat:', resultat);
};

Worker.js:

// Lyt efter data fra hovedtråden
self.onbesked = fungere (begivenhed) {
konst tal = begivenhed.data;

konst resultat = udføre HeavyCalculation (tal);

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

fungereudføre HeavyCalculation(data) {
// Udfør en kompleks beregning på rækken af ​​tal
Vend tilbage data
.kort((nummer) =>Matematik.pow (nummer, 3)) // Cube hvert tal
.filter((nummer) => nummer % 20) // Filtrer lige tal
.reducere((sum, antal) => sum + tal, 0); // Sum alle tal
}

I dette eksempel sender du en række tal fra hovedtråden til Web Worker. Webarbejderen udfører beregningen ved hjælp af den medfølgende række af data og sender resultatet tilbage til hovedtråden. Det udføre HeavyCalculation() Funktionen kortlægger hvert tal til dens terning, filtrerer de lige tal fra og summerer dem til sidst.

Begrænsninger og overvejelser

Mens Web Workers giver en mekanisme til at opnå parallelitet i JavaScript, er det vigtigt at overveje et par begrænsninger og overvejelser:

  • Ingen delt hukommelse: Webarbejdere opererer i separate tråde og deler ikke hukommelse med hovedtråden. Så de kan ikke få direkte adgang til variabler eller objekter fra hovedtråden uden at sende en besked.
  • Serialisering og deserialisering: Når du sender data mellem hovedtråden og Web Workers, skal du serialisere og deserialisere dataene, da meddelelsesoverførsel er en tekstbaseret kommunikation. Denne proces medfører en ydeevneomkostning og kan påvirke appens overordnede ydeevne.
  • Browser support: Selvom Web Workers er godt understøttet i de fleste moderne webbrowsere, kan nogle ældre browsere eller begrænsede miljøer have delvis eller ingen understøttelse af Web Workers.

Opnå ægte parallelisme i JavaScript

Parallelisme i JavaScript er et spændende koncept, der muliggør ægte samtidig udførelse af opgaver, selv i et primært enkelttrådet sprog. Med introduktionen af ​​Web Workers kan du udnytte kraften ved parallelitet og opnå betydelige præstationsforbedringer i dine JavaScript-applikationer.