Introduction à l'API JavaScript de Web Workers

Travailleurs Web est une API JavaScript qui vous permet de exécuter des scripts dans un fil séparé du fil principal. Cela peut s'avérer utile lorsque vous ne voulez aucun obstacle dans l'exécution des scripts principaux, grâce aux scripts d'arrière-plan.

L'API Web Workers est supporté dans presque tous les navigateurs, Pour plus d'informations, consultez la documentation de CanIUse. Avant d'entrer dans le code, voyons quelques scénarios d'utilisation de cette API afin de vous donner une idée de ce que je voulais dire par scripts d'arrière-plan.

Cas d'utilisation

Disons qu'il y a un script qui récupère et traite un fichier. Si un fichier est considérablement grand cela prendra beaucoup de temps pour être traité! Qui pourrait empêcher d'autres scripts qui ont été appelés plus tard d'être exécutés.

Cependant, si le le traitement du fichier est déplacé vers un fil de fond, connu comme le fil de travailleur, les autres événements ne seront pas bloqués jusqu'à la fin du premier.

Le scénario exécuté dans un thread de travail en arrière-plan est connu comme le script de travailleur ou juste le ouvrier.

Pour un autre exemple, imaginons qu’il existe un grande forme, disposée en onglets. Il est écrit de manière à mettre à jour les contrôles dans un seul onglet affecte certains des contrôles dans d'autres.

Si la mise à jour des autres onglets prend un certain temps, l'utilisateur ne peut pas utiliser en permanence l'onglet en cours sans que ses événements soient mis en attente. Cela pourrait geler l'interface utilisateur, à la consternation de l'utilisateur.

Puisqu’un utilisateur ne verra pas les autres onglets lorsqu’il en remplira un, vous pouvez met à jour les contrôles des autres onglets d'un fil de fond. De cette façon, l'utilisateur peut continuer à utiliser l'onglet en cours qu'il remplit, sans qu'aucun de ses scripts ne soit bloqué par le processus de mise à jour des contrôles des autres onglets..

De même, si vous trouvez un scénario où un script peut empêcher un utilisateur d'utiliser l'interface utilisateur tant que son exécution n'est pas terminée, vous pouvez envisager de le déplacer vers un thread de travail afin qu'il puisse être exécuté en arrière-plan..

Portées et types de travailleurs

L'API Web Workers est probablement l'une des API les plus simples à utiliser. Il a des méthodes assez simples pour créer des threads de travail et communiquer avec eux à partir du script principal.

La portée globale d'un thread de travail se trouve dans un contexte différent de celui du thread principal. Vous ne peut pas accéder aux méthodes et propriétés de la fenêtre objet tel que alerte() à l'intérieur d'un thread de travail. Toi aussi ne peut pas changer le DOM directement à partir d'un thread de travail.

Cependant, vous pouvez utiliser de nombreuses API qui relèvent de la fenêtre, par exemple Promettre et Chercher, dans votre thread de travail (voir la liste complète).

Vous pouvez aussi avoir threads de travail imbriqués: threads de travail créés à partir d'un autre thread de travail. Un ouvrier créé par un autre s'appelle un sous-traitant.

Il y a aussi beaucoup les types des ouvriers. Les deux principaux sont travailleurs dévoués et partagés.

Travailleurs dédiés appartenir au même contexte de navigation que leur fil principal appartient. Les travailleurs partagés, cependant, sont présenter dans un contexte de navigation différent (par exemple, dans une iframe) du script principal. Dans les deux cas, le script principal et les ouvriers être dans le même domaine.

L’exemple de ce tutoriel sera à propos de travailleur dédié, qui est le type le plus commun.

Méthodes de l'API

Voir le schéma ci-dessous pour une aperçu rapide de toutes les méthodes principales qui constituent l'API Web Workers.

le Ouvrier() constructeur crée un thread de travail dédié et renvoie son objet de référence. Ensuite, nous utilisons cet objet pour communiquer avec ce travailleur spécifique.

le postMessage () Cette méthode est utilisée à la fois dans le script principal et dans le script de travail. s'envoyer des données. Les données envoyées sont ensuite reçues de l'autre côté par le message gestionnaire d'événements.

le mettre fin() méthode termine un thread de travail à partir du script principal. Cette résiliation est immédiat: toute exécution de script en cours et les scripts en attente seront annulés. le Fermer() méthode fait la même chose, mais il est appelé par le thread de travail se refermant.

Exemple de code

Voyons maintenant un exemple de code. le index.html la page contient le scénario principal à l'intérieur d'un

Nous commençons par le création du thread de travail à partir du script principal.

  w = nouveau travailleur ('worker.js'); 
 le Ouvrier() constructeur prend l'URL du fichier worker comme argument.
 Ensuite, nous ajoutons un gestionnaire d’événements pour le message cas de l'instance de travail nouvellement créée à recevoir des données de celui-ci. le Les données propriété du e événement tiendra les données reçues.
  w = nouveau travailleur ('worker.js'); w.onmessage = (e) => console.log ('Reçu du travailleur: $ e.data');  
 Maintenant, nous utilisons postMessage () à envoyer des données au thread de travail sur le clic d'un bouton. le postMessage () méthode peut prendre deux arguments. Le premier peut être de n'importe quel type (chaîne, tableau,…). C'est les données à envoyer au thread de travail (ou au script principal, lorsque la méthode est présente dans le thread de travail).
 Le deuxième paramètre facultatif est un tableau d'objets qui peut être utilisé par les threads de travail (mais pas par le script principal, ou vice-versa). Ces types d'objets sont appelés Transférable objets.
  document.querySelector ('button'). onclick = () => w.postMessage ('john');  
 J'envoie simplement une valeur de chaîne au thread de travail.
 Dans le thread de travail, nous devons ajouter un message gestionnaire d'événements qui recevra les données envoyé à celui-ci par le script principal au clic du bouton. À l'intérieur du gestionnaire, nous concaténer la chaîne reçue avec un autre et renvoyer le résultat au script principal.
  console.info ('travailleur créé'); onmessage = (e) => postMessage ('Hi $ e.data');  
 Contrairement au script principal où nous devions utiliser le w objet de référence à se référer au thread de travail spécifique sur lequel le script utilise ensuite le message et postMessage méthodes, il y a pas besoin d'un objet de référence dans le thread de travail pointer sur le fil conducteur.
 Le code fonctionne comme suit. Quand le navigateur se charge index.html, la console affichera le "travailleur créé" message dès que le ouvrier() le constructeur est exécuté dans le thread principal, créer un nouveau travailleur.
 Lorsque vous cliquez sur le bouton de la page, vous obtenez le "Reçu du travailleur: Salut john" message dans la console, qui est la chaîne qui était concaténé dans le thread de travail avec les données qui lui ont été envoyées, puis a été renvoyé au script principal.