In JavaScript zijn er meerdere manieren om de algehele gebruikersinterface van de site te verbeteren. De “Webwerker” is zo'n aanpak waarmee de hoofdthread kan blijven worden uitgevoerd zonder te worden geblokkeerd. Het omvat een afzonderlijke JavaScript-engine-instantie en kan daarom geen beroep doen op de functionaliteiten van de hoofdthread.
In dit artikel wordt besproken hoe u dit kunt gebruiken “Webwerker” voor multithreading in JavaScript.
Wat zijn webwerkers?
“Webwerkers” komt overeen met een browser-API waarmee JavaScript de taken parallel/tegelijkertijd op een afzonderlijke/specifieke thread kan uitvoeren.
Wat is de behoefte aan webwerkers?
Omdat JavaScript single-threaded is, blokkeren de complexe JavaScript-codes de UI-thread, dat wil zeggen dat ze het hoofdvenster stoppen dat alle taken uitvoert voor het vernieuwen, implementeren van gebruikersinvoergebeurtenissen, enz. In een dergelijk scenario wordt de gebruikerservaring beïnvloed . Om dit probleem het hoofd te bieden, heeft de “Webwerker” wordt van kracht en verhelpt de blokkering van de UI-thread.
Hoe webwerkers te gebruiken voor multithreading met JavaScript?
Om een “Webwerker” , gebruik de Worker-constructor. Het is zo dat het een URL als argument gebruikt, die overeenkomt met het pad van het werkscriptbestand dat de gewenste functionaliteit implementeert. Als u de werkcode echter in een HTML-bestand wilt opnemen, gebruikt u a “klodder” om werkcode te schrijven.
Syntaxis (een webwerker maken)
const X = nieuw Werknemer ( 'werker.js' ) ;Syntaxis (een bericht naar de werknemer verzenden)
const X = nieuw Werknemer ( 'werker.js' ) ;
Syntaxis (een bericht ontvangen van de werknemer)
X. bericht = functie ( evenement ) {troosten. loggen ( evenement. gegevens ) ;
} ;
Voorbeeld: gebruik van 'Web Worker' om de faculteit van een getal in JavaScript te berekenen
In het volgende voorbeeld wordt gebruik gemaakt van de “Werknemer()” constructor om een webwerker te maken en de faculteit van een getal te berekenen:
< html >
< hoofd >
< h2-stijl = 'tekst uitlijnen: centreren;' > Voorbeeld van webwerkers h2 >
hoofd >
< lichaam >
< script >
const X = nieuw Werknemer ( URL. maakObjectURL ( nieuw Blob ( [
`
// Worker-script
const feit = ( N ) => {
als ( N == 0 || N == 1 ) {
opbrengst 1n ;
}
anders {
opbrengst GrootInt ( N ) * feit ( GrootInt ( N ) - 1n ) ;
}
} ;
zelf. bericht = ( evenement ) => {
const Met = feit ( evenement. gegevens ) ;
zelf. postBericht ( Met. naarString ( ) ) ;
} ; `
] , { type : 'tekst/javascript' } ) ) ) ;
X. postBericht ( 15n ) ;
X. bericht = ( evenement ) => {
const uit = evenement. gegevens ;
troosten. loggen ( 'Factoriaal van 15 via een webwerker-> ' , uit ) ;
} ;
lichaam >
html >
Voer in deze code de volgende stappen uit:
- Geef eerst de aangegeven kop op.
- Maak daarna een “Webwerker” object met de URL van het Blob-object dat de code voor de werker bevat.
- De code die aan de werknemer is toegewezen, is opgenomen in een anonieme functie die de faculteit van het getal berekent via een recursieve functie.
- Ook luistert de medewerker naar berichten die via de hoofdthread worden verzonden met behulp van de “zelf.aan-bericht” gebeurtenis, haalt de faculteit van het doorgegeven getal op en geeft de uitkomst aan de hoofdthread via de “postBericht()” methode.
- Maak in de hoofdthread een werkexemplaar en stuur deze een bericht met het nummer “ 15n ”. Hier, ' N ” verwijst naar de “BigInt”-waarde.
- Nadat de werker klaar is met het berekenen van de faculteit, stuurt hij het resultaat/uitkomst terug naar de hoofdthread met behulp van de “postBericht()” methode.
- Ten slotte haalt/ontvangt de hoofdthread de uitkomst in het “aan bericht” gebeurtenis en retourneert de overeenkomstige faculteit van het getal op de console.
Uitvoer
Voordelen van webwerkers
Parallelle verwerking : In het geval dat dezelfde code parallel wordt uitgevoerd.
Geen verstoring van de uitvoering van de code: De uitvoering van code gebeurt ongeacht vernieuwingen enz. op de huidige pagina.
Beweging volgen: Alle bewegingsdetectie vindt plaats in de achtergrondwerker.
Multithreading ingeschakeld: Deze maken multithreading in JavaScript mogelijk.
Verbeterde prestatie: Optimaliseer de prestaties door intensieve/uitdagende taken in afzonderlijke threads uit te voeren.
Effectieve gebruikerservaring: Deze voorkomen dat de hoofdthread wordt geblokkeerd, wat resulteert in een responsieve gebruikerservaring.
Beperkingen van webwerkers
Er zijn echter ook enkele beperkingen van de webwerkers. Deze worden als volgt vermeld:
- Groter gebruik van geheugen.
- Kan DOM in een werkthread niet bijwerken of het vensterobject aanroepen.
Conclusie
“Webwerkers” komt overeen met een browser-API waarmee JavaScript de taken tegelijkertijd op een afzonderlijke/specifieke thread kan uitvoeren. Deze kunnen worden gebruikt door een URL als argument te nemen, die overeenkomt met het pad van het werkscriptbestand. Deze blog besprak het gebruik van “Web Workers” voor multithreading in JavaScript.