Programátoři JavaScriptu jsou zvyklí předstírat paralelismus, ale existuje způsob, jak dosáhnout skutečného paralelismu, který byste měli používat právě teď.

JavaScript může bojovat s úkoly náročnými na výkon, protože je to jednovláknový jazyk. Pomocí paralelismu můžete dosáhnout vícevláknového provádění v JavaScriptu a zlepšit výkon a odezvu vašich moderních webových aplikací.

Paralelnost v programování v JavaScriptu

Paralelnost je v moderních počítačích zásadní pro zlepšení výkonu a škálovatelnosti. Dělá to efektivním využitím dostupných zdrojů.

Běžnou technikou používanou k dosažení paralelismu v programování je multi-threading. Vlákno JavaScriptu je však jednovláknový systém a může zpracovávat pouze jeden úkol najednou. To znamená, že nezná paralelní spouštění programů.

JavaScript falšuje paralelní programování

Obvyklá mylná představa o paralelismu je, že jej můžete dosáhnout pomocí techniky asynchronního programování jako async/wait, zpětná volání a sliby:

// Funkce Async/await, která simuluje síťový požadavek
instagram viewer

asynchronnífunkcefetchData() {
konst odpověď = čekat vynést();
konst údaje = čekat response.json();
vrátit se data;
}

// Funkce zpětného volání, která zaznamenává načtená data do konzole
funkcelogData(data) {
řídicí panel.log (data);
}

// Metoda Promise.all(), která provádí více příslibů paralelně
Slib.Všechno([
fetchData(),
fetchData(),
]).pak((Výsledek) => {
řídicí panel.log (výsledky);
});

// Volání funkce fetchData a předání funkce logData jako zpětného volání
fetchData().then (logData);

Tyto techniky ve skutečnosti neprovádějí kód paralelně. JavaScript používá smyčku událostí k napodobení paralelního programování v rámci svého jednovláknového návrhu.

Smyčka událostí je základní součástí běhového prostředí JavaScriptu. Umožňuje provádět asynchronní operace, jako jsou síťové požadavky, na pozadí bez blokování hlavního jediného vlákna.

Smyčka událostí neustále kontroluje nové události nebo úkoly ve frontě a provádí je postupně jednu po druhé. Tato technika umožňuje JavaScriptu dosáhnout souběžnosti a teoretického paralelismu.

Souběžnost vs. Rovnoběžnost

Souběžnost a paralelismus jsou ve světě JavaScriptu často nepochopeny a zaměňovány.

Souběžnost v JavaScriptu označuje schopnost provádět více úkolů překrýváním provádění úkolů. Kde jeden úkol může začít dříve, než se dokončí jiný, ale úkoly nemohou začít ani skončit současně. To umožňuje JavaScriptu efektivně zpracovávat operace, jako je načítání dat z REST API nebo čtení souborů bez blokování hlavního spouštěcího vlákna.

Na druhé straně paralelismus označuje schopnost provádět více úloh současně ve více vláknech. Tato vlákna na pozadí mohou provádět úkoly nezávisle a současně. To otevírá příležitosti pro dosažení skutečného paralelismu v aplikacích JavaScript.

Aplikace JavaScriptu mohou dosáhnout skutečného paralelismu prostřednictvím použití Web Workers.

Web Workers zavádějí paralelismus s JavaScriptem

Web Workers je funkce moderních webových prohlížečů, která umožňuje spouštění kódu JavaScript ve vláknech na pozadí, odděleně od hlavního spouštěcího vlákna. Na rozdíl od hlavního vlákna, které zpracovává uživatelské interakce a aktualizace uživatelského rozhraní. Web Worker by se věnoval provádění výpočetně náročných úloh.

Níže je schéma znázorňující činnost webového pracovníka v JavaScriptu.

Hlavní vlákno a Web Worker mohou komunikovat pomocí předávání zpráv. Za použití postMessage způsob odesílání zpráv a onmessage událost handler přijímat zprávy, můžete předávat instrukce nebo data tam a zpět.

Vytvoření Web Worker

Chcete-li vytvořit Web Worker, musíte vytvořit samostatný soubor JavaScript.

Zde je příklad:

// main.js

// Vytvořte nového Web Worker
konst dělník = Nový Pracovník('worker.js');

// Odeslat zprávu Web Worker
worker.postMessage("Ahoj z hlavního vlákna!");

// Poslouchejte zprávy od Web Worker
worker.onmessage = funkce(událost) {
řídicí panel.log('Přijatá zpráva od Web Worker:', event.data);
};

Výše uvedený příklad vytvoří nového Web Worker předáním cesty k worker skriptu (worker.js) jako argument k Pracovník konstruktér. Web Workerovi můžete odeslat zprávu pomocí postMessage a poslouchejte zprávy od Web Worker pomocí onmessage obsluha události.

Poté byste měli vytvořit pracovní skript (worker.js) soubor:

// worker.js

// Poslouchejte zprávy z hlavního vlákna
self.onmessage = funkce(událost) {
řídicí panel.log('Přijatá zpráva z hlavního vlákna:', event.data);

// Odeslat zprávu zpět do hlavního vlákna
self.postMessage("Dobrý den z worker.js!");
};

Skript Web Worker naslouchá zprávám z hlavního vlákna pomocí onmessage obsluha události. Po obdržení zprávy se odhlásíte ze zprávy uvnitř event.data a odeslat novou zprávu do hlavního vlákna s příponou postMessage metoda.

Využití paralelismu s webovými pracovníky

Primárním případem použití pro Web Workers je paralelní provádění výpočetně náročných úloh JavaScriptu. Přenesením těchto úloh na Web Workers můžete dosáhnout výrazného zlepšení výkonu.

Zde je příklad použití webového pracovníka k provedení náročného výpočtu:

// main.js

konst dělník = Nový Pracovník('worker.js');

// Odeslání dat do Web Worker k výpočtu
worker.postMessage([1, 2, 3, 4, 5]);

// Poslechněte si výsledek z Web Worker
worker.onmessage = funkce(událost) {
konst výsledek = událost.data;
řídicí panel.log('Výsledek výpočtu:', výsledek);
};

Worker.js:

// Poslouchejte data z hlavního vlákna
self.onmessage = funkce (událost) {
konst čísla = událost.data;

konst výsledek = provéstHeavyCalculation (čísla);

// Odešle výsledek zpět do hlavního vlákna
self.postMessage (výsledek);
};

funkceprovést HeavyCalculation(data) {
// Proveďte komplexní výpočet na poli čísel
vrátit se data
.mapa((číslo) =>Matematika.pow (číslo, 3)) // Krychle každé číslo
.filtr((číslo) => číslo % 20) // Filtrování sudých čísel
.snížit((součet, číslo) => součet + číslo, 0); // Sečtěte všechna čísla
}

V tomto příkladu předáte pole čísel z hlavního vlákna do Web Worker. Web Worker provede výpočet pomocí poskytnutého pole dat a odešle výsledek zpět do hlavního vlákna. The provéstHeavyCalculation() funkce mapuje každé číslo na jeho kostku, filtruje sudá čísla a nakonec je sečte.

Omezení a úvahy

Přestože Web Workers poskytují mechanismus pro dosažení paralelismu v JavaScriptu, je důležité vzít v úvahu několik omezení a úvah:

  • Žádná sdílená paměť: Web Workers pracují v samostatných vláknech a nesdílejí paměť s hlavním vláknem. Nemohou tedy přímo přistupovat k proměnným nebo objektům z hlavního vlákna bez předávání zprávy.
  • Serializace a deserializace: Při předávání dat mezi hlavním vláknem a Web Workers je potřeba data serializovat a deserializovat, protože předávání zpráv je textová komunikace. Tento proces s sebou nese náklady na výkon a může ovlivnit celkový výkon aplikace.
  • Podpora prohlížeče: Ačkoli jsou Web Workers dobře podporováni ve většině moderních webových prohlížečů, některé starší prohlížeče nebo omezená prostředí mohou mít pro Web Workers částečnou nebo žádnou podporu.

Dosáhněte skutečné paralely v JavaScriptu

Paralelnost v JavaScriptu je vzrušující koncept, který umožňuje skutečné souběžné provádění úloh, a to i v primárně jednovláknovém jazyce. Se zavedením Web Workers můžete využít sílu paralelismu a dosáhnout výrazného zlepšení výkonu ve vašich aplikacích JavaScript.