Programátori JavaScriptu sú zvyknutí predstierať paralelizmus, ale existuje spôsob, ako dosiahnuť skutočný paralelizmus, ktorý by ste mali používať práve teraz.

JavaScript môže zápasiť s úlohami náročnými na výkon, pretože ide o jednovláknový jazyk. Pomocou paralelizmu môžete dosiahnuť viacvláknové vykonávanie v JavaScripte a zlepšiť výkon a odozvu vašich moderných webových aplikácií.

Paralelnosť v programovaní v JavaScripte

Paralelnosť je v modernej výpočtovej technike kľúčová pre zlepšenie výkonu a škálovateľnosti. Robí to efektívnym využívaním dostupných zdrojov.

Bežnou technikou používanou na dosiahnutie paralelizmu pri programovaní je multi-threading. Vlákno JavaScriptu je však jednovláknový systém a môže naraz spracovať iba jednu úlohu. To znamená, že nepozná paralelné spúšťanie programov.

JavaScript falšuje paralelné programovanie

Bežná mylná predstava o paralelizme je, že ho môžete dosiahnuť pomocou techniky asynchrónneho programovania ako async/wait, spätné volania a sľuby:

// Funkcia Async/await, ktorá simuluje sieťovú požiadavku
instagram viewer

asyncfunkciufetchData() {
konšt odpoveď = čakať fetch();
konšt údaje = čakať response.json();
vrátiť údaje;
}

// Funkcia spätného volania, ktorá zaznamenáva načítané údaje do konzoly
funkciulogData(údajov) {
konzoly.log (údaje);
}

// Metóda Promise.all(), ktorá vykonáva viacero prísľubov paralelne
Sľub.all([
fetchData(),
fetchData(),
]).potom((výsledky) => {
konzoly.log (výsledky);
});

// Zavolajte funkciu fetchData a odovzdajte funkciu logData ako spätné volanie
fetchData().then (logData);

Tieto techniky v skutočnosti nevykonávajú kód paralelne. JavaScript používa slučku udalostí na napodobňovanie paralelného programovania v rámci svojho jednovláknového dizajnu.

Slučka udalostí je základnou súčasťou runtime prostredia JavaScriptu. Umožňuje vám vykonávať asynchrónne operácie, ako sú sieťové požiadavky, na pozadí bez blokovania hlavného jediného vlákna.

Slučka udalostí neustále kontroluje nové udalosti alebo úlohy vo fronte a vykonáva ich jednu po druhej. Táto technika umožňuje JavaScriptu dosiahnuť súbežnosť a teoretický paralelizmus.

Súbeh vs. Paralelizmus

Súbežnosť a paralelizmus sú vo svete JavaScriptu často nepochopené a zamieňané.

Súbežnosť v JavaScripte sa týka schopnosti vykonávať viacero úloh prekrývaním vykonávania úloh. Kde jedna úloha môže začať pred dokončením inej, ale úlohy nemôžu začať ani skončiť súčasne. To umožňuje JavaScriptu efektívne spracovávať operácie, ako je načítanie údajov z REST API alebo čítanie súborov bez blokovania hlavného vykonávacieho vlákna.

Na druhej strane paralelizmus sa týka schopnosti vykonávať viacero úloh súčasne vo viacerých vláknach. Tieto vlákna na pozadí môžu vykonávať úlohy nezávisle a súčasne. To otvára príležitosti na dosiahnutie skutočného paralelizmu v aplikáciách JavaScript.

Aplikácie JavaScriptu môžu dosiahnuť skutočný paralelizmus používanie Web Workers.

Web Workers zavádzajú paralelizmus s JavaScriptom

Web Workers sú funkciou moderných webových prehliadačov, ktoré umožňujú spúšťanie kódu JavaScript vo vláknach na pozadí, oddelene od hlavného vykonávacieho vlákna. Na rozdiel od hlavného vlákna, ktoré sa stará o interakcie používateľov a aktualizácie používateľského rozhrania. Web Worker by sa venoval vykonávaniu výpočtovo náročných úloh.

Nižšie je znázornený diagram fungovania webového pracovníka v JavaScripte.

Hlavné vlákno a Web Worker môžu komunikovať pomocou odovzdávania správ. Pomocou postSpráva spôsob odosielania správ a onmessage obsluhu udalosti na prijímanie správ, môžete prenášať pokyny alebo údaje tam a späť.

Vytvorenie Web Worker

Ak chcete vytvoriť Web Worker, musíte vytvoriť samostatný súbor JavaScript.

Tu je príklad:

// main.js

// Vytvorenie nového Web Worker
konšt pracovník = Nový Pracovník('worker.js');

// Pošlite správu Web Workerovi
worker.postMessage('Ahoj z hlavného vlákna!');

// Vypočujte si správy od Web Worker
pracovník.onmessage = funkciu(udalosť) {
konzoly.log('Prijatá správa od Web Worker:', event.data);
};

Vyššie uvedený príklad vytvorí nového webového pracovníka odoslaním cesty k pracovnému skriptu (worker.js) ako argument k Pracovník konštruktér. Web Workerovi môžete poslať správu pomocou postSpráva a počúvajte správy od Web Worker pomocou onmessage obsluha udalosti.

Potom by ste mali vytvoriť pracovný skript (worker.js) súbor:

// worker.js

// Vypočujte si správy z hlavného vlákna
self.onmessage = funkciu(udalosť) {
konzoly.log('Prijatá správa z hlavného vlákna:', event.data);

// Odoslať správu späť do hlavného vlákna
self.postMessage("Dobrý deň z worker.js!");
};

Skript Web Worker počúva správy z hlavného vlákna pomocou onmessage obsluha udalosti. Po prijatí správy sa odhlásite zo správy vo vnútri event.data a pošlite novú správu do hlavného vlákna pomocou postSpráva metóda.

Využitie paralelizmu s webovými pracovníkmi

Primárnym prípadom použitia Web Workers je paralelné vykonávanie výpočtovo náročných úloh JavaScriptu. Presunutím týchto úloh na Web Workers môžete dosiahnuť výrazné zlepšenie výkonu.

Tu je príklad použitia webového pracovníka na vykonanie náročného výpočtu:

// main.js

konšt pracovník = Nový Pracovník('worker.js');

// Odoslanie údajov do Web Worker na výpočet
worker.postMessage([1, 2, 3, 4, 5]);

// Vypočujte si výsledok z Web Worker
pracovník.onmessage = funkciu(udalosť) {
konšt výsledok = udalosť.údaje;
konzoly.log('Výsledok výpočtu:', výsledok);
};

Worker.js:

// Vypočujte si údaje z hlavného vlákna
self.onmessage = funkciu (udalosť) {
konšt čísla = udalosť.údaje;

konšt vysledok = vykonatHeavyCalculation (cisla);

// Pošlite výsledok späť do hlavného vlákna
self.postMessage (výsledok);
};

funkciuvykonať HeavyCalculation(údajov) {
// Vykonajte zložitý výpočet na poli čísel
vrátiť údajov
.map((číslo) =>Matematika.pow (číslo, 3)) // Kocka každé číslo
.filter((číslo) => číslo % 20) // Filtrovanie párnych čísel
.znížiť((súčet, číslo) => súčet + číslo, 0); // Sčítajte všetky čísla
}

V tomto príklade odošlete pole čísel z hlavného vlákna do Web Worker. Web Worker vykoná výpočet pomocou poskytnutého poľa údajov a pošle výsledok späť do hlavného vlákna. The performHeavyCalculation() funkcia mapuje každé číslo do jeho kocky, odfiltruje párne čísla a nakoniec ich spočíta.

Obmedzenia a úvahy

Hoci Web Workers poskytujú mechanizmus na dosiahnutie paralelizmu v JavaScripte, je dôležité zvážiť niekoľko obmedzení a úvah:

  • Žiadna zdieľaná pamäť: Web Workers pracujú v samostatných vláknach a nezdieľajú pamäť s hlavným vláknom. Nemôžu teda priamo pristupovať k premenným alebo objektom z hlavného vlákna bez odoslania správy.
  • Serializácia a deserializácia: Pri odovzdávaní údajov medzi hlavným vláknom a Web Workers je potrebné serializovať a deserializovať údaje, pretože odovzdávanie správ je textová komunikácia. Tento proces si vyžaduje náklady na výkon a môže ovplyvniť celkový výkon aplikácie.
  • Podpora prehliadača: Hoci sú Web Workers dobre podporované vo väčšine moderných webových prehliadačov, niektoré staršie prehliadače alebo obmedzené prostredia môžu mať pre Web Workers čiastočnú alebo žiadnu podporu.

Dosiahnite skutočnú paralelnosť v JavaScripte

Paralelnosť v JavaScripte je vzrušujúci koncept, ktorý umožňuje skutočné súbežné vykonávanie úloh, dokonca aj v primárne jednovláknovom jazyku. So zavedením Web Workers môžete využiť silu paralelizmu a dosiahnuť výrazné zlepšenie výkonu vo vašich aplikáciách JavaScript.