V JavaScripte existuje viacero prístupov na zlepšenie celkového používateľského rozhrania stránky. The 'Webový pracovník' je jedným z takýchto prístupov, ktorý umožňuje hlavnému vláknu pokračovať vo vykonávaní bez toho, aby bolo zablokované. Zahŕňa samostatnú inštanciu nástroja JavaScript, a preto nemôže vyvolať funkcie hlavného vlákna.
Tento článok bude diskutovať o tom, ako používať 'Webový pracovník' pre multithreading v JavaScripte.
Čo sú Web Workers?
„Weboví pracovníci“ zodpovedá API prehliadača, ktoré umožňuje JavaScriptu spúšťať úlohy paralelne/súčasne v samostatnom/vyhradenom vlákne.
Aká je potreba webových pracovníkov?
Keďže JavaScript je jednovláknový, zložité kódy JavaScript blokujú vlákno používateľského rozhrania, t. j. zastavia hlavné okno, ktoré sa zaoberá všetkými úlohami na obnovenie, implementáciu udalostí vstupu používateľa atď. V takomto scenári je ovplyvnená skúsenosť používateľa . Na zvládnutie tohto problému, 'Webový pracovník' vstúpi do platnosti a vyrieši blokovanie vlákna používateľského rozhrania.
Ako používať Web Workers na multithreading s JavaScriptom?
Ak chcete urobiť a 'Webový pracovník' , použite konštruktor Worker. Je taká, že ako argument berie adresu URL, ktorá zodpovedá ceste súboru pracovného skriptu implementujúcej požadovanú funkciu. Ak však chcete zahrnúť pracovný kód do súboru HTML, použite a 'blob' na písanie kódu pracovníka.
Syntax (Vytvorenie webového pracovníka)
konšt X = Nový Pracovník ( 'worker.js' ) ;Syntax (Odoslanie správy pracovníkovi)
konšt X = Nový Pracovník ( 'worker.js' ) ;
Syntax (prijatie správy od pracovníka)
X. onmessage = funkciu ( udalosť ) {konzoly. log ( udalosť. údajov ) ;
} ;
Príklad: Využitie „Web Worker“ na výpočet faktoriálu čísla v JavaScripte
Nasledujúci príklad používa 'Pracovník()' konštruktor na vytvorenie webového pracovníka a výpočet faktoriálu čísla:
< html >
< hlavu >
< štýl h2 = 'text-align: center;' > Príklad Web Workers h2 >
hlavu >
< telo >
< skript >
konšt X = Nový Pracovník ( URL. createObjectURL ( Nový Blob ( [
`
// Pracovný skript
konšt skutočnosť = ( n ) => {
ak ( n == 0 || n == 1 ) {
vrátiť 1n ;
}
inak {
vrátiť BigInt ( n ) * skutočnosť ( BigInt ( n ) - 1n ) ;
}
} ;
seba. onmessage = ( udalosť ) => {
konšt s = skutočnosť ( udalosť. údajov ) ;
seba. postSpráva ( s. natiahnuť ( ) ) ;
} ; `
] , { typu : 'text/javascript' } ) ) ) ;
X. postSpráva ( 15n ) ;
X. onmessage = ( udalosť ) => {
konšt von = udalosť. údajov ;
konzoly. log ( 'Factorial of 15 cez Web Worker->' , von ) ;
} ;
telo >
html >
V tomto kóde použite nasledujúce kroky:
- Najprv špecifikujte uvedený nadpis.
- Potom vytvorte a 'Webový pracovník' objekt s adresou URL objektu Blob, ktorý obsahuje kód pre pracovníka.
- Kód venovaný pracovníkovi je zahrnutý v anonymnej funkcii, ktorá počíta faktoriál čísla pomocou rekurzívnej funkcie.
- Pracovník tiež počúva správy odoslané cez hlavné vlákno pomocou 'samo.správa' udalosť, načíta faktoriál odovzdaného čísla a odovzdá výsledok hlavnému vláknu cez 'postMessage()' metóda.
- V hlavnom vlákne vytvorte inštanciu pracovníka a pošlite jej správu s číslom „ 15n “. Tu, ' n “ označuje hodnotu „BigInt“.
- Keď pracovník skončí s výpočtom faktoriálu, odošle výsledok/výsledok späť do hlavného vlákna pomocou 'postMessage()' metóda.
- Nakoniec hlavné vlákno načíta/prijme výsledok v “onmessage” udalosť a vráti zodpovedajúci faktoriál čísla na konzole.
Výkon
Výhody Web Workers
Paralelné spracovanie : V prípade paralelného spustenia rovnakého kódu.
Žiadne prerušenie pri vykonávaní kódu: Spustenie kódu sa vykonáva bez ohľadu na obnovenie atď. na aktuálnej stránke.
Sledovanie pohybu: Celá detekcia pohybu prebieha v pozadí.
Povolené viacvláknové spracovanie: Tieto umožňujú multithreading v JavaScripte.
Vylepšený výkon: Optimalizujte výkon vykonávaním intenzívnych/náročných úloh v samostatných vláknach.
Efektívna používateľská skúsenosť: Tie zabraňujú zablokovaniu hlavného vlákna, čo má za následok responzívnu používateľskú skúsenosť.
Obmedzenia Web Workers
Existujú však aj určité obmedzenia pre pracovníkov webu. Tie sú uvedené takto:
- Väčšie využitie pamäte.
- Nemožno aktualizovať DOM v pracovnom vlákne alebo vyvolať objekt okna.
Záver
„Weboví pracovníci“ zodpovedá rozhraniu API prehliadača, ktoré umožňuje JavaScriptu spúšťať úlohy súčasne v samostatnom/vyhradenom vlákne. Môžete ich použiť tak, že sa ako argument použije adresa URL, ktorá zodpovedá ceste súboru pracovného skriptu. Tento blog diskutoval o použití „Web Workers“ pre multithreading v JavaScripte.