En JavaScript, il existe plusieurs approches pour améliorer l'interface utilisateur globale du site. Le « Travailleur Web » est l'une de ces approches qui permet au thread principal de continuer à s'exécuter sans être bloqué. Il comprend son instance de moteur JavaScript distincte et ne peut donc pas invoquer les fonctionnalités du thread principal.
Cet article expliquera comment utiliser « Travailleur Web » pour le multithreading en JavaScript.
Que sont les Web Workers ?
« Travailleurs du Web » correspond à une API de navigateur qui permet à JavaScript d'exécuter les tâches en parallèle/en même temps sur un thread séparé/dédié.
Quel est le besoin de travailleurs Web ?
Étant donné que JavaScript est monothread, les codes JavaScript complexes bloquent le thread de l'interface utilisateur, c'est-à-dire arrêtent la fenêtre principale qui gère toutes les tâches d'actualisation, d'implémentation des événements de saisie utilisateur, etc. Dans un tel scénario, l'expérience utilisateur est affectée. . Pour faire face à ce problème, le « Travailleur Web » entre en vigueur et résout le blocage du thread de l'interface utilisateur.
Comment utiliser les Web Workers pour le multithreading avec JavaScript ?
Faire un « Travailleur Web » , utilisez le constructeur Worker. Il est tel qu’il prend comme argument une URL, qui correspond au chemin du fichier script de travail implémentant la fonctionnalité souhaitée. Cependant, pour inclure le code du travailleur dans un fichier HTML, utilisez un 'goutte' pour écrire le code du travailleur.
Syntaxe (Création d'un Web Worker)
const X = nouveau Ouvrier ( 'travailleur.js' ) ;Syntaxe (Envoi d'un message au travailleur)
const X = nouveau Ouvrier ( 'travailleur.js' ) ;
Syntaxe (réception d'un message du travailleur)
X. sur message = fonction ( événement ) {console. enregistrer ( événement. données ) ;
} ;
Exemple : Utilisation de « Web Worker » pour calculer la factorielle d'un nombre en JavaScript
L'exemple suivant utilise le 'Ouvrier()' constructeur pour créer un web worker et calculer la factorielle d'un nombre :
< HTML >
< tête >
< style h2 = 'alignement du texte : centre ;' > Exemple de travailleurs Web h2 >
tête >
< corps >
< scénario >
const X = nouveau Ouvrier ( URL. créerObjectURL ( nouveau Goutte ( [
`
// Script de travail
const fait = ( n ) => {
si ( n == 0 || n == 1 ) {
retour 1n ;
}
autre {
retour GrosInt ( n ) * fait ( GrosInt ( n ) - 1n ) ;
}
} ;
soi. sur message = ( événement ) => {
const Avec = fait ( événement. données ) ;
soi. postMessage ( Avec. versChaîne ( ) ) ;
} ; `
] , { taper : 'texte/javascript' } ) ) ) ;
X. postMessage ( 15h ) ;
X. sur message = ( événement ) => {
const dehors = événement. données ;
console. enregistrer ( 'Factoriale de 15 via un Web Worker->' , dehors ) ;
} ;
corps >
HTML >
Dans ce code, appliquez les étapes suivantes :
- Tout d’abord, précisez le titre indiqué.
- Après cela, créez un « Travailleur Web » objet ayant l’URL de l’objet Blob qui comprend le code du travailleur.
- Le code dédié au travailleur est inclus dans une fonction anonyme qui calcule la factorielle du nombre via une fonction récursive.
- En outre, le travailleur écoute les messages envoyés via le thread principal en utilisant le « auto-message » événement, récupère la factorielle du nombre passé et donne le résultat au thread principal via le 'postMessage()' méthode.
- Dans le fil de discussion principal, créez une instance de travailleur et envoyez-lui un message avec le numéro « 15h ». Ici, ' n » fait référence à la valeur « BigInt ».
- Une fois que le travailleur a fini de calculer la factorielle, il renvoie le résultat au thread principal en utilisant le 'postMessage()' méthode.
- Enfin, le thread principal récupère/reçoit le résultat dans le 'sur message' événement et renvoie la factorielle correspondante du nombre sur la console.
Sortir
Avantages des travailleurs Web
Traitement parallèle : Dans le cas de l’exécution du même code de manière parallèle.
Aucune interruption dans l'exécution du code : L'exécution du code se fait indépendamment des actualisations, etc. sur la page actuelle.
Suivi des mouvements : Toute la détection de mouvement a lieu dans le travailleur d'arrière-plan.
Multithreading activé : Ceux-ci permettent le multithreading en JavaScript.
Performance améliorée: Optimisez les performances en effectuant des tâches intensives/difficiles dans des threads séparés.
Expérience utilisateur efficace : Ceux-ci évitent de bloquer le thread principal, ce qui se traduit par une expérience utilisateur réactive.
Limites des Web Workers
Cependant, les Web Workers présentent également certaines limites. Ceux-ci sont indiqués comme suit :
- Meilleure utilisation de la mémoire.
- Impossible de mettre à jour le DOM dans un thread de travail ou d'appeler l'objet window.
Conclusion
« Travailleurs du Web » correspond à une API de navigateur qui permet à JavaScript d'exécuter les tâches en même temps sur un thread séparé/dédié. Ceux-ci peuvent être utilisés en prenant comme argument une URL, qui correspond au chemin du fichier de script de travail. Ce blog traitait de l'utilisation des « Web Workers » pour le multithreading en JavaScript.