Que sont les travailleurs du Web et comment sont-ils liés à HTML?

Les travailleurs Web sont des threads indépendants en cours d'exécution dans l'arrière-plan du navigateur, utilisés pour effectuer des tâches longues sans bloquer l'interface utilisateur. Ils sont implémentés via des fichiers JavaScript, démarrés par des scripts dans les pages HTML, mais sont séparés du thread principal une fois exécuté. 1. Les travailleurs Web ne peuvent pas accéder directement au DOM pour garantir la stabilité de la page; 2. Ils obtiennent une communication sécurisée avec le fil principal via PostMessage () et OnMessage; 3. Il convient au traitement des tâches à forte intensité de processeur telles que les images, l'informatique complexe, l'analyse des données; 4. Il prend en charge certaines API telles que Settimeout, Fetch et IndededDB; 5. Lorsque vous l'utilisez, vous devez faire attention aux difficultés de débogage, à l'utilisation de la mémoire, aux restrictions inter-domaines et à d'autres problèmes. L'utilisation raisonnable des travailleurs du Web peut améliorer les performances des pages Web.

Les travailleurs du Web vous permettent d'exécuter du code JavaScript en arrière-plan, séparé du thread de navigateur principal. Ceci est super utile car cela signifie que des tâches lourdes - comme les calculs ou le traitement des données - ne gèlent pas votre page Web. Ils sont liés à HTML en ce qu'ils sont partis de JavaScript en cours d'exécution dans une page HTML, mais une fois qu'ils fonctionnent, ils travaillent indépendamment.

Qu'est-ce qu'un travailleur Web exactement?

Un travailleur Web est essentiellement un fichier JS qui s'exécute en arrière-plan. Cela n'interfère pas avec l'interface utilisateur, donc votre page reste réactive même lorsque vous faites quelque chose de lourd. Vous en créez un en pointant un fichier JavaScript lorsque vous instanciez un objet Worker dans votre script principal (celui lié à partir de votre page HTML).

Voici comment vous en démarrez un:

 const Worker = New Worker ('Worker.js');

Ils ne peuvent pas accéder directement au Dom - ce qui a du sens, car si deux threads essayaient de modifier la page à la fois, les choses pourraient devenir désordonnées. Mais ils peuvent faire des choses comme récupérer les données, les traiter et renvoyer des résultats au thread principal à l'aide de messages.

Comment communiquez-vous avec un travailleur?

La communication se produit à travers des messages. Le thread principal et le travailleur utilisent postMessage() pour envoyer des données et onmessage pour les recevoir.

Dans votre script principal:

 wearch.PostMessage («Start Working»);
working.onMessage = fonction (événement) {
  Console.log ('Got Result:', event.data);
};

Inside worker.js :

 onMessage = fonction (événement) {
  // travaille ici
  postmessage («travail fait»);
};

Ce système basé sur des messages assure les choses en sécurité et évite les conflits. Vous pouvez également envoyer des types de données plus complexes comme des tableaux ou des objets - ils seront clonés automatiquement.

Quand devriez-vous utiliser des travailleurs Web?

Utilisez-les lorsque vous avez des tâches lourdes de processeur qui pourraient bloquer l'interface utilisateur. Les bons exemples incluent:

• Traitement de l'image ou de la vidéo
• Simulations complexes de mathématiques ou de physique
• Analyse de données ou compression
• Logique de synchronisation ou de mise en cache arrière

Si votre page se sent lente pendant certaines opérations, le déchargement de ce travail à un travailleur pourrait beaucoup aider.

Gardez également à l'esprit que tout ne fonctionne pas à l'intérieur d'un travailleur. Par exemple, vous ne pouvez pas accéder au DOM ou à la plupart des API de navigateur comme document ou alert() . Mais des choses comme setTimeout , fetch et IndexedDB sont disponibles.

Y a-t-il des gotchas?

Oui, quelques choses font trébucher:

• Les travailleurs ne peuvent pas être débogués aussi facilement que les scripts réguliers. Vous devrez utiliser des outils de développement du navigateur et regarder dans la bonne section (comme "travailleurs" dans Chrome Devtools).
• Chaque travailleur exécute dans sa propre portée mondiale. Les variables ou les fonctions de la page principale ne sont donc pas accessibles.
• La frai trop de travailleurs peut manger de la mémoire. Réutilisez-les lorsque cela est possible ou terminez-les avec worker.terminate() s'ils n'ont plus besoin.
• Problèmes d'origine croisée: le script des travailleurs doit provenir de la même origine que la page principale, sinon le navigateur le bloque pour des raisons de sécurité.

Ainsi, bien que les travailleurs du Web soient puissants, ils sont mieux utilisés de manière réfléchie et uniquement en cas de besoin.

Fondamentalement, c'est tout.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!