A JavaScriptben többféle megközelítés létezik a webhely általános felhasználói felületének javítására. A „Webmunkás” Az egyik ilyen megközelítés, amely lehetővé teszi, hogy a fő szál leblokkolása nélkül folytassa a végrehajtást. Ez magában foglalja a különálló JavaScript-motorpéldányt, és ezért nem tudja meghívni a főszál funkcióit.
Ez a cikk megvitatja, hogyan kell használni „Webmunkás” többszálú JavaScript-ben.
Mik azok a webmunkások?
„Webes dolgozók” egy böngésző API-nak felel meg, amely lehetővé teszi a JavaScript számára a feladatok párhuzamos/egyidejű futtatását egy külön/dedikált szálon.
Mire van szükség webmunkásokra?
Mivel a JavaScript egyszálú, ezért az összetett JavaScript-kódok blokkolják a felhasználói felület szálát, azaz leállítják a főablakot, amely megbirkózik a frissítési, felhasználói beviteli események stb. feladatával. Ebben az esetben a felhasználói élményt befolyásolja. . Hogy megbirkózzon ezzel a problémával, a „Webmunkás” hatályba lép, és feloldja a felhasználói felület blokkolását.
Hogyan használhatjuk a webmunkásokat többszálú futtatáshoz JavaScripttel?
Ahhoz, hogy a „Webmunkás” , használja a Worker konstruktort. Ez olyan, hogy argumentumaként egy URL-t vesz fel, amely megfelel a kívánt funkciót megvalósító worker script fájl elérési útjának. Ha azonban a dolgozó kódját egy HTML-fájlba szeretné foglalni, használja a 'folt' dolgozói kódot írni.
Szintaxis (Webes dolgozó létrehozása)
const x = új Munkás ( 'dolgozó.js' ) ;Szintaxis (Üzenet küldése a dolgozónak)
const x = új Munkás ( 'dolgozó.js' ) ;
Szintaxis (Üzenet fogadása a dolgozótól)
x. üzenetben = funkció ( esemény ) {konzol. log ( esemény. adat ) ;
} ;
Példa: A „Web Worker” használata egy szám faktorszámának kiszámításához JavaScriptben
A következő példa a 'Munkás()' konstruktor webmunkás létrehozásához és egy szám faktoriálisának kiszámításához:
< html >
< fej >
< h2 stílusban = 'text-align: center;' > Példa a webmunkásokra h2 >
fej >
< test >
< forgatókönyv >
const x = új Munkás ( URL. createObjectURL ( új Folt ( [
`
// Worker script
const tény = ( n ) => {
ha ( n == 0 || n == 1 ) {
Visszatérés 1n ;
}
más {
Visszatérés BigInt ( n ) * tény ( BigInt ( n ) - 1n ) ;
}
} ;
maga. üzenetben = ( esemény ) => {
const Val vel = tény ( esemény. adat ) ;
maga. postMessage ( Val vel. toString ( ) ) ;
} ; `
] , { típus : 'text/javascript' } ) ) ) ;
x. postMessage ( 15n ) ;
x. üzenetben = ( esemény ) => {
const ki = esemény. adat ;
konzol. log ( 'Factory of 15 Via a Web Worker->' , ki ) ;
} ;
test >
html >
Ebben a kódban hajtsa végre a következő lépéseket:
- Először adja meg a megadott címsort.
- Ezt követően hozzon létre a „Webmunkás” objektum, amely a dolgozó kódját tartalmazó Blob objektum URL-jét tartalmazza.
- A dolgozónak szánt kód egy névtelen függvényben található, amely egy rekurzív függvényen keresztül számítja ki a szám faktoriálisát.
- Ezenkívül a dolgozó figyeli a fő szálon keresztül küldött üzeneteket a „self.onmessage” esemény, lekéri az átadott szám faktoriálisát, és az eredményt a főszálon keresztül adja meg „postMessage()” módszer.
- A fő szálban hozzon létre egy dolgozó példányt, és küldjön neki egy üzenetet a következő számmal 15n ”. Itt, ' n ” a „BigInt” értékre utal.
- Miután a dolgozó befejezte a faktoriális kiszámítását, az eredményt/eredményt visszaküldi a főszálnak a „postMessage()” módszer.
- Végül a fő szál lekéri/kapja az eredményt a 'üzenet' eseményt, és visszaadja a szám megfelelő faktoriálisát a konzolon.
Kimenet
A webmunkások előnyei
Párhuzamos feldolgozás : Ugyanazon kód párhuzamos futtatása esetén.
Nincs fennakadás a kódvégrehajtásban: A kód végrehajtása az aktuális oldalon történt frissítésektől stb.
Mozgáskövetés: Az összes mozgásérzékelés a háttérmunkásban történik.
Engedélyezett többszálú: Ezek lehetővé teszik a többszálú JavaScript használatát.
Fokozott teljesítmény: Optimalizálja a teljesítményt azáltal, hogy intenzív/kihívást jelentő feladatokat külön szálban végez.
Hatékony felhasználói élmény: Ezek elkerülik a fő szál blokkolását, ami érzékeny felhasználói élményt eredményez.
A webmunkások korlátai
Vannak azonban bizonyos korlátozások a webmunkások számára is. Ezek a következők szerint vannak feltüntetve:
- A memória nagyobb kihasználása.
- Nem frissíthető a DOM egy munkaszálban, és nem hívható meg az ablakobjektum.
Következtetés
„Webes dolgozók” egy böngésző API-nak felel meg, amely lehetővé teszi a JavaScript számára, hogy egyidejűleg futtassa a feladatokat egy különálló/dedikált szálon. Ezeket úgy használhatjuk fel, hogy argumentumaként egy URL-t veszünk, amely megfelel a dolgozó szkriptfájl elérési útjának. Ez a blog a „webmunkások” használatát tárgyalja többszálú JavaScriptben.