Vad är parallellism i JavaScript?

JavaScript kan kämpa med prestandaintensiva uppgifter eftersom det är ett entrådigt språk. Genom att använda parallellism kan du uppnå flertrådskörning i JavaScript och förbättra prestandan och lyhördheten hos dina moderna webbappar.

Parallellism i JavaScript-programmering

Parallellism är avgörande i modern datoranvändning för att förbättra prestanda och skalbarhet. Den gör detta genom att effektivt utnyttja tillgängliga resurser.

En vanlig teknik som används för att uppnå parallellitet i programmering är multi-threading. JavaScript-tråden är dock ett entrådssystem och kan bara hantera en uppgift åt gången. Detta betyder att den inte är bekant med parallella programkörningar.

JavaScript förfalskar parallell programmering

En vanlig missuppfattning om parallellism är att du kan uppnå det med hjälp av asynkron programmeringsteknik som async/await, callbacks och löften:

// Async/await-funktion som simulerar en nätverksbegäran
asynkronfungerahämta Data() {
konst svar = vänta hämta();
konst data = vänta response.json();
lämna tillbaka data;
}
// Återuppringningsfunktion som loggar hämtad data till konsolen
fungeralogData(data) {
trösta.log (data);
}
// Promise.all() metod som utför flera löften parallellt
Löfte.Allt([
 fetchData(),
 fetchData(),
]).sedan((resultat) => {
trösta.log (resultat);
});
// Anropa fetchData-funktionen och skicka logData-funktionen som en återuppringning
fetchData().then (logData);

Dessa tekniker exekverar faktiskt inte kod parallellt. JavaScript använder händelseslingan för att efterlikna parallell programmering inom sin entrådiga design.

Händelseloopen är en grundläggande del av JavaScript-runtime-miljön. Det låter dig utföra asynkrona operationer, såsom nätverksförfrågningar, i bakgrunden utan att blockera huvudtråden.

Händelseloopen letar ständigt efter nya händelser eller uppgifter i en kö och exekverar dem en efter en sekventiellt. Denna teknik tillåter JavaScript att uppnå samtidighet och teoretisk parallellism.

Samtidighet vs. Parallellism

Samtidighet och parallellism är ofta missförstådda och utbytta i JavaScript-världen.

Samtidighet i JavaScript hänvisar till förmågan att utföra flera uppgifter genom att överlappa utförandet av uppgifterna. Där en uppgift kan börja innan en annan slutförs, men uppgifterna varken kan starta eller sluta samtidigt. Detta gör det möjligt för JavaScript att effektivt hantera operationer, som att hämta data från ett REST API eller läsa filer, utan att blockera huvudexekveringstråden.

Parallellism, å andra sidan, hänvisar till förmågan att utföra flera uppgifter samtidigt över flera trådar. Dessa bakgrundstrådar kan utföra uppgifter oberoende och samtidigt. Detta öppnar möjligheter för att uppnå sann parallellitet i JavaScript-applikationer.

JavaScripts applikationer kan uppnå sann parallellism genom användningen av Web Workers.

Web-arbetare introducerar parallellism till JavaScript

Web Workers är en funktion i moderna webbläsare som tillåter JavaScript-kod att köras i bakgrundstrådar, separat från huvudexekveringstråden. Till skillnad från huvudtråden, som hanterar användarinteraktioner och UI-uppdateringar. Web Worker skulle vara dedikerad till att utföra beräkningsintensiva uppgifter.

Nedan visas en diagramrepresentation av hur en Web Worker fungerar i JavaScript.

Huvudtråden och Web Worker kan kommunicera genom att skicka meddelanden. Använda skicka meddelande metod för att skicka meddelanden och ett meddelande händelsehanterare för att ta emot meddelanden, kan du skicka instruktioner eller data fram och tillbaka.

Skapa en webbarbetare

För att skapa en Web Worker måste du skapa en separat JavaScript-fil.

Här är ett exempel:

// main.js
// Skapa en ny Web Worker
konst arbetare = ny Arbetstagare("worker.js");
// Skicka ett meddelande till Web Worker
worker.postMessage("Hej från huvudtråden!");
// Lyssna efter meddelanden från Web Worker
worker.onmessage = fungera(händelse) {
trösta.logga("Mottaget meddelande från Web Worker:", event.data);
};

Exemplet ovan skapar en ny Web Worker genom att skicka sökvägen till arbetarskriptet (worker.js) som ett argument till Arbetstagare konstruktör. Du kan skicka ett meddelande till Web Worker med hjälp av skicka meddelande metod och lyssna efter meddelanden från Web Worker med hjälp av ett meddelande händelsehanterare.

Du bör sedan skapa arbetsskriptet (worker.js) fil:

// worker.js
// Lyssna efter meddelanden från huvudtråden
self.onmessage = fungera(händelse) {
trösta.logga("Fick meddelande från huvudtråden:", event.data);
// Skicka ett meddelande tillbaka till huvudtråden
 self.postMessage("Hej från worker.js!");
};

Web Worker-skriptet lyssnar efter meddelanden från huvudtråden med hjälp av ett meddelande händelsehanterare. När du får ett meddelande loggar du ut meddelandet inuti händelse.data och skicka ett nytt meddelande till huvudtråden med skicka meddelande metod.

Utnyttja parallellism med webbarbetare

Det primära användningsfallet för Web Workers är att utföra beräkningsintensiva JavaScript-uppgifter parallellt. Genom att överföra dessa uppgifter till Web Workers kan du uppnå betydande prestandaförbättringar.

Här är ett exempel på hur du använder en webbarbetare för att utföra en tung beräkning:

// main.js
konst arbetare = ny Arbetstagare("worker.js");
// Skicka data till Web Worker för beräkning
worker.postMessage([1, 2, 3, 4, 5]);
// Lyssna efter resultatet från Web Worker
worker.onmessage = fungera(händelse) {
konst resultat = händelse.data;
trösta.logga('Beräkningsresultat:', resultat);
};

Worker.js:

// Lyssna efter data från huvudtråden
self.onmessage = fungera (händelse) {
konst siffror = händelse.data;
konst resultat = utför HeavyCalculation (tal);
// Skicka tillbaka resultatet till huvudtråden
 self.postMessage (resultat);
};
fungerautför HeavyCalculation(data) {
// Utför en komplex beräkning på arrayen av tal
lämna tillbaka data
 .Karta((siffra) =>Matematik.pow (nummer, 3)) // Kube varje nummer
 .filtrera((siffra) => siffra % 20) // Filtrera jämna tal
 .minska((summa, antal) => summa + tal, 0); // Summa alla tal
}

I det här exemplet skickar du en array av nummer från huvudtråden till Web Worker. Web Worker utför beräkningen med hjälp av den tillhandahållna uppsättningen av data och skickar resultatet tillbaka till huvudtråden. De performHeavyCalculation() funktion mappar varje nummer till sin kub, filtrerar bort de jämna talen och summerar dem slutligen.

Begränsningar och överväganden

Även om webbarbetare tillhandahåller en mekanism för att uppnå parallellitet i JavaScript, är det viktigt att överväga några begränsningar och överväganden:

• Inget delat minne: Web Workers arbetar i separata trådar och delar inte minne med huvudtråden. Så de kan inte direkt komma åt variabler eller objekt från huvudtråden utan att meddelandet passerar.
• Serialisering och deserialisering: När du skickar data mellan huvudtråden och Web Workers måste du serialisera och deserialisera data eftersom meddelandeöverföring är en textbaserad kommunikation. Denna process medför en prestationskostnad och kan påverka appens övergripande prestanda.
• Webbläsarstöd: Även om Web Workers har bra stöd i de flesta moderna webbläsare, kan vissa äldre webbläsare eller begränsade miljöer ha delvis eller inget stöd för Web Workers.

Uppnå sann parallellism i JavaScript

Parallellism i JavaScript är ett spännande koncept som möjliggör verklig samtidig exekvering av uppgifter, även i ett primärt entrådigt språk. Med introduktionen av Web Workers kan du utnyttja kraften i parallellitet och uppnå betydande prestandaförbättringar i dina JavaScript-applikationer.