Présentation des workers Web

Jusqu'à présent, le contenu de ce cours était principalement axé sur des concepts tels que Considérations générales sur les performances HTML, conseils de ressources, optimisation de divers pour améliorer le temps de chargement initial de la page et la réactivité vis-à-vis de l'utilisateur et le chargement différé de ressources spécifiques.

Cependant, un aspect des performances de JavaScript n'a pas encore été déjà abordés dans ce cours, et c'est le rôle des travailleurs Web dans l'amélioration la réactivité aux entrées, qui est abordée dans ce module et dans le suivant.

JavaScript est souvent décrit comme un langage monothread. En pratique, fait référence au thread principal, qui est le thread unique dans lequel le navigateur effectue la plupart des tâches que vous voyez dans le navigateur. Ce travail inclut les tâches impliquées pour créer des scripts, effectuer certains rendus, analyser des fichiers HTML et CSS, et d'autres types de tâches visibles par l'utilisateur qui améliorent l'expérience utilisateur. En réalité, les navigateurs utilisent d'autres fils de discussion pour effectuer un travail que vous, en tant que développeur, ne faites pas qui disposent généralement d'un accès direct, comme les threads GPU.

En ce qui concerne JavaScript, vous êtes généralement limité à travailler sur le thread principal, mais seulement par défaut. Il est possible d'enregistrer et d'utiliser des threads supplémentaires en JavaScript. La fonctionnalité permettant d'utiliser le multithreading dans JavaScript est connu sous le nom d'API Web Workers.

Les nœuds de calcul Web sont utiles pour les tâches gourmandes en ressources de calcul ne peuvent pas s'exécuter sur le thread principal sans entraîner de longues tâches qui rendent la page ne répond pas. Il est fort probable que ces tâches aient une incidence sur l'interaction avec Next Paint (INP). Il peut donc être utile de savoir quand vos contenus peuvent être entièrement à partir du thread principal. Cela peut aider à créer plus d'espace pour d'autres tâches sur le thread principal afin d'accélérer les interactions utilisateur.

Ce module et la démonstration suivante présentant un cas d'utilisation concret portent sur le Web les nœuds de calcul. La démonstration montre comment utiliser un nœud de calcul Web pour effectuer le travail. de lecture des métadonnées d'image à partir d'un fichier JPEG hors du fil d'exécution principal, peut renvoyer ces métadonnées au thread principal pour que l'utilisateur les voie.

Mode de lancement d'un nœud de calcul Web

Un nœud de calcul Web est enregistré en instanciant la classe Worker. Dans ce cas, C'est pourquoi vous devez spécifier l'emplacement du code du nœud de calcul Web, chargé par le navigateur. puis crée un nouveau fil de discussion. Le thread qui en résulte est souvent appelé Un thread de nœud de calcul

const myWebWorker = new Worker('/js/my-web-worker.js');

Dans le fichier JavaScript du nœud de calcul (my-web-worker.js dans le cas présent), vous pouvez ensuite écrire du code qui s'exécute ensuite dans un thread de travail distinct.

Limites des nœuds de calcul Web

Contrairement à JavaScript qui s'exécute sur le thread principal, les nœuds de calcul Web ne disposent pas d'un accès direct au contexte window. et disposent d'un accès limité aux API qu'il fournit. Web Les nœuds de calcul sont soumis aux contraintes suivantes:

• Les nœuds de calcul Web ne peuvent pas accéder directement au DOM.
• Les travailleurs Web peuvent communiquer avec le contexte window par le biais d'une messagerie ce qui signifie qu'un nœud de calcul Web peut accéder indirectement au DOM d'une manière.
• Le champ d'application du nœud de calcul Web est défini sur self, et non sur window.
• Le champ d'application du nœud de calcul Web a accès aux primitives JavaScript et ainsi que des API telles que fetch et un très grand nombre de d'autres API.

Comment les Web workers communiquent avec le window

Un nœud de calcul Web peut communiquer avec le window du thread principal. le contexte via un pipeline de messagerie. Ce pipeline vous permet d'acheminer des données vers et à partir du thread principal et du nœud de calcul Web. Pour envoyer des données à partir d'un nœud de calcul Web vers thread principal, vous configurez un événement message dans le contexte du nœud de calcul Web (self).

// my-web-worker.js
self.addEventListener("message", () => {
  // Sends a message of "Hellow, window!" from the web worker:
  self.postMessage("Hello, window!");
});

Ensuite, dans un script dans le contexte window du thread principal, vous pouvez recevoir le du thread du nœud de calcul Web à l'aide d'un autre événement message:

// scripts.js

// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');

// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
  // Echoes "Hello, window!" to the console from the worker.
  console.log(data);
});

Le pipeline de messagerie du travailleur Web est une sorte de mécanisme de secours par rapport au Web le contexte du nœud de calcul. Vous pouvez l'utiliser pour envoyer des données au window à partir du nœud de calcul Web. pour mettre à jour le DOM ou effectuer d'autres tâches à effectuer sur le thread principal.

Tester vos connaissances

À suivre: un cas d'utilisation concret d'un travailleur Web

Le module suivant présente un cas d'utilisation concret d'un nœud de calcul Web. a démontré. Dans ce module, un nœud de calcul Web est utilisé pour récupérer un fichier JPEG à partir d'un une URL donnée et lire ses métadonnées Exif dans un nœud de calcul Web. Ces données sont ensuite envoyées au thread principal pour être affiché à l'utilisateur.