Galerie de cartes mentales Travailleur Web
Comprendre et utiliser les Web Workers. Les Web Workers sont un ensemble d'API fournies et standardisées par HTML5. Il crée un environnement d'exécution multithread pour JavaScript.
Modifié à 2024-03-08 16:53:42This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
Travailleur Web
La naissance du Web Worker
Comme nous le savons tous, js a été initialement conçu pour fonctionner dans le navigateur.
Afin d'éviter que plusieurs threads n'exploitent le DOM en même temps et ne provoquent des conflits de rendu, l'exécuteur js est conçu pour être monothread.
Avec le développement de la technologie front-end, face à des scénarios nécessitant beaucoup de calculs, les threads js sont souvent bloqués pendant une longue période, et provoquent même des blocages de pages, affectant l'expérience utilisateur.
En savoir plus sur les Web Workers
Qu'est-ce qu'un Web Worker ?
Les Web Workers font partie du standard HTML5
Définit un ensemble d'API qui nous permettent d'ouvrir un nouveau thread de travail en dehors du thread js principal et d'y exécuter un script js.
Donne aux développeurs la possibilité d'utiliser js pour fonctionner en multi-threads
L'interface utilisateur de l'application Web reste réactive même si le script s'exécute pendant une longue période
Avantages des travailleurs Web
Améliorer les performances de la page : effectuez certaines opérations gourmandes en calculs ou chronophages dans le thread d'arrière-plan, telles que le traitement des données, le traitement des images, etc., sans occuper le thread principal, évitant ainsi les retards ou les gels de page et améliorant les performances et la réactivité de la page. .
Traiter des données à grande échelle : les données à grande échelle peuvent être traitées car elles s'exécutent dans des threads séparés et n'affecteront pas l'exécution du thread principal. Les données à grande échelle peuvent être traitées plus efficacement, améliorant ainsi l'efficacité et l'évolutivité du code.
Rendre le code plus modulaire : le code peut être divisé en plusieurs modules et exécuté dans différents threads, rendant ainsi le code plus modulaire, maintenable et lisible.
Prise en charge du multi-threading : prend en charge le multi-threading, afin que vous puissiez profiter des processeurs multicœurs pour améliorer l'efficacité d'exécution de votre code.
Scénarios d'utilisation de Web Worker
Traitement d'image : comme la rotation, le recadrage, la mise à l'échelle, les filtres, etc. Cela améliore les performances et la réactivité du traitement de l’image.
Traitement des données : comme le filtrage, le tri, la synthèse et la transformation d'ensembles de données, etc. Cela améliore l’efficacité et la précision du traitement des données.
Tâches nécessitant beaucoup de calcul : telles que la simulation, l'optimisation, la prédiction, les statistiques, etc. Cela améliore la vitesse et la précision des tâches informatiques.
Communication en temps réel : comme les salons de discussion, les jeux, la vidéoconférence, etc. Cela améliore la stabilité et les performances des communications en temps réel.
Mise en cache hors ligne : les ressources couramment utilisées peuvent être pré-téléchargées dans le cache local du client, et les ressources du cache peuvent être utilisées lorsqu'Internet n'est pas accessible. Cela peut améliorer la convivialité et la réactivité de votre application, en particulier sur les appareils mobiles.
Traitement multi-thread : comme le calcul parallèle, la répartition des tâches, l'équilibrage de charge, etc. Cela améliore la concurrence et l’évolutivité du système.
Utilisation du Web Worker
Créer un Worker : appelez simplement le constructeur Worker() via new, qui reçoit deux paramètres : const worker = new Worker(path, options);
js transfert de données du thread principal et du thread de travail : le thread principal et le thread de travail envoient tous deux des messages via la méthode postMessage et écoutent l'événement de message pour recevoir des messages
Le transfert de données entre le thread principal et le thread de travail s'effectue par valeur plutôt que par adresse. Par conséquent, même si un objet est transmis et renvoyé directement, la valeur reçue n'est pas la valeur d'origine.
Écoute des messages d'erreur : le travailleur Web fournit deux événements pour écouter les erreurs
erreur : déclenché lorsqu'une erreur se produit à l'intérieur du travailleur
messageerror : déclenché lorsque l'événement de message reçoit des paramètres qui ne peuvent pas être désérialisés
Fermez le thread de travail : l'arrêt du thread de travail peut être effectué à la fois sur le thread principal et sur le thread de travail, mais l'impact sur le thread de travail est légèrement différent.
Similitude : que le travailleur soit arrêté dans le thread principal ou qu'il soit arrêté dans le thread de travail, les tâches de la boucle d'événements actuelle du thread de travail continueront à s'exécuter.
La différence : lorsque le travailleur est fermé manuellement dans le thread principal, la connexion entre le thread principal et le thread de travail sera immédiatement arrêtée même s'il y a encore des tâches à exécuter dans la boucle d'événements actuelle du thread de travail, le postMessage. () continuera à être appelée, mais le thread principal ne recevra plus de message reçu. La fermeture du travailleur à l'intérieur du thread de travail ne le déconnectera pas directement du thread principal, mais attendra que toutes les tâches de la boucle d'événements actuelle du thread de travail soient terminées avant de le fermer. En d’autres termes, si vous continuez à appeler la méthode postMessage() dans la boucle d’événements actuelle, le thread principal peut toujours recevoir des messages en écoutant l’événement de message.
Le thread de travail fait référence à d'autres fichiers js
Web Worker fournit la méthode importScripts() dans le thread de travail pour charger les fichiers js dont nous avons besoin. De plus, les fichiers js chargés via cette méthode ne sont pas soumis à la même politique d'origine.
Mode ESModule : lorsque le fichier js est en mode ESModule, importScripts() ne parviendra pas à importer le fichier. Dans ce cas, vous devez utiliser const worker = new Worker('/worker.js', {type : 'module'}. ) pour spécifier le type de fichier, puis vous pouvez Introduit à l'aide de la méthode d'importation
Quels types de données peuvent être transmis entre le thread principal et les threads de travail
Les objets Erreur et Fonction et les nœuds Dom ne peuvent pas être transmis
Travailleur partagé
Est un type spécial de Worker auquel peuvent accéder plusieurs contextes de navigation, tels que plusieurs fenêtres, iframes et Workers, mais ces contextes de navigation doivent avoir la même origine.
Implémenté dans une interface différente des Workers ordinaires, avec une portée globale différente : SharedWorkerGlobalScope, mais héritée de WorkerGlobalScope
La différence avec les travailleurs : le thread principal et le thread SharedWorker établissent un lien via MessagePort, et les méthodes de communication de données sont toutes montées sur SharedWorker.port. Si addEventListener est utilisé pour recevoir des événements de message, une fois que le thread principal a initialisé SharedWorker(), il est utilisé. doit être appelé la méthode SharedWorker.port.start() pour ouvrir manuellement le port, mais si la méthode onmessage est utilisée, le port est ouvert par défaut et il n'est pas nécessaire d'appeler manuellement la méthode SharedWorker.port.start().
Remarque : L'utilisation de la console pour imprimer les informations dans le thread sharedWorker n'apparaîtra pas dans la console du thread principal.
Pour déboguer sharedWorker, vous devez entrer chrome://inspect/ dans le navigateur Chrome. Ici, vous pouvez voir tous les sharedWorkers en cours d'exécution, puis ouvrir un panneau d'outils de développement indépendant.
compatibilité
Les Web Workers sont déjà pris en charge par la plupart des navigateurs et il n'est pratiquement pas nécessaire de prendre en compte les problèmes de compatibilité lors de leur utilisation.
La compatibilité de sharedWorker dans Safari et les terminaux mobiles n'est pas très bonne, vous devez donc faire attention lors de son utilisation.