V JavaScriptu existuje několik přístupů k vylepšení celkového uživatelského rozhraní webu. The 'Webový pracovník' je jedním z takových přístupů, který umožňuje hlavnímu vláknu pokračovat v provádění, aniž by bylo blokováno. Zahrnuje samostatnou instanci enginu JavaScript, a proto nemůže vyvolat funkce hlavního vlákna.
Tento článek bude diskutovat o tom, jak používat 'Webový pracovník' pro multithreading v JavaScriptu.
Co jsou Web Workers?
'Weboví pracovníci' odpovídá rozhraní API prohlížeče, které umožňuje JavaScriptu spouštět úlohy paralelně/současně v samostatném/vyhrazeném vláknu.
Co je potřeba pro webové pracovníky?
Vzhledem k tomu, že JavaScript je jednovláknový, složité kódy JavaScriptu blokují vlákno uživatelského rozhraní, tj. zastaví hlavní okno, které se vypořádává se všemi úkoly pro obnovení, implementaci událostí uživatelského vstupu atd. V takovém scénáři je ovlivněna uživatelská zkušenost. . Chcete-li se s tímto problémem vyrovnat, 'Webový pracovník' vstoupí v platnost a řeší blokování vlákna uživatelského rozhraní.
Jak používat Web Workers pro multithreading s JavaScriptem?
Chcete-li udělat a 'Webový pracovník' , použijte konstruktor Worker. Je taková, že jako argument bere adresu URL, která odpovídá cestě souboru pracovního skriptu implementující požadovanou funkci. Chcete-li však zahrnout pracovní kód do souboru HTML, použijte a 'kapka' napsat kód pracovníka.
Syntaxe (vytvoření webového pracovníka)
konst X = Nový Pracovník ( 'worker.js' ) ;Syntaxe (odeslání zprávy pracovníkovi)
konst X = Nový Pracovník ( 'worker.js' ) ;
Syntaxe (přijetí zprávy od pracovníka)
X. onmessage = funkce ( událost ) {řídicí panel. log ( událost. data ) ;
} ;
Příklad: Využití „Web Worker“ k výpočtu faktoriálu čísla v JavaScriptu
Následující příklad používá 'Pracovník()' konstruktor pro vytvoření webového pracovníka a výpočet faktoriálu čísla:
< html >
< hlava >
< styl h2 = 'text-align: center;' > Příklad Web Workers h2 >
hlava >
< tělo >
< skript >
konst X = Nový Pracovník ( URL. createObjectURL ( Nový Kapka ( [
'
// Pracovní skript
konst skutečnost = ( n ) => {
-li ( n == 0 || n == 1 ) {
vrátit se 1n ;
}
jiný {
vrátit se BigInt ( n ) * skutečnost ( BigInt ( n ) - 1n ) ;
}
} ;
já. onmessage = ( událost ) => {
konst S = skutečnost ( událost. data ) ;
já. postMessage ( S. toString ( ) ) ;
} ; '
] , { typ : 'text/javascript' } ) ) ) ;
X. postMessage ( 15n ) ;
X. onmessage = ( událost ) => {
konst ven = událost. data ;
řídicí panel. log ( 'Factorial of 15 přes webového pracovníka->' , ven ) ;
} ;
tělo >
html >
V tomto kódu použijte následující kroky:
- Nejprve specifikujte uvedený nadpis.
- Poté vytvořte a 'Webový pracovník' objekt s adresou URL objektu Blob, který obsahuje kód pro pracovníka.
- Kód vyhrazený pracovníkovi je součástí anonymní funkce, která počítá faktoriál čísla pomocí rekurzivní funkce.
- Pracovník také naslouchá zprávám odeslaným prostřednictvím hlavního vlákna pomocí 'self.onmessage' událost, získá faktoriál předaného čísla a předá výsledek hlavnímu vláknu prostřednictvím 'postMessage()' metoda.
- V hlavním vláknu vytvořte instanci pracovníka a odešlete jí zprávu s číslem „ 15n “. Tady, ' n “ odkazuje na hodnotu „BigInt“.
- Poté, co pracovník dokončí výpočet faktoriálu, odešle výsledek/výsledek zpět do hlavního vlákna pomocí 'postMessage()' metoda.
- Nakonec hlavní vlákno načte/přijme výsledek v 'onmessage' událost a vrátí odpovídající faktoriál čísla na konzole.
Výstup
Výhody Web Workers
Paralelní zpracování : V případě paralelního spuštění stejného kódu.
Žádné narušení při provádění kódu: Spuštění kódu se provádí bez ohledu na aktualizace atd. na aktuální stránce.
Sledování pohybu: Veškerá detekce pohybu probíhá na pozadí.
Povoleno vícevláknové zpracování: Ty umožňují multithreading v JavaScriptu.
Vylepšený výkon: Optimalizujte výkon prováděním intenzivních/náročných úkolů v samostatných vláknech.
Efektivní uživatelská zkušenost: Ty zabraňují blokování hlavního vlákna, což má za následek citlivé uživatelské prostředí.
Omezení Web Workers
Existují však i určitá omezení webových pracovníků. Ty jsou uvedeny takto:
- Větší využití paměti.
- Nelze aktualizovat DOM v pracovním vláknu nebo vyvolat objekt okna.
Závěr
'Weboví pracovníci' odpovídá rozhraní API prohlížeče, které umožňuje JavaScriptu spouštět úlohy současně v samostatném/vyhrazeném vláknu. Ty lze využít tak, že jako argument vezmeme adresu URL, která odpovídá cestě souboru pracovního skriptu. Tento blog pojednával o použití „Web Workers“ pro multithreading v JavaScriptu.