Descripción general de los trabajadores web

Hasta ahora, gran parte del contenido de este curso se ha centrado en conceptos como consideraciones generales sobre el rendimiento de HTML, sugerencias de recursos, optimización de varios tipos de recursos para mejorar el tiempo de carga inicial de la página y la capacidad de respuesta para el usuario y la carga diferida de recursos específicos.

Sin embargo, hay un aspecto del rendimiento en JavaScript que no se que abarcamos en este curso, y ese es el rol de los trabajadores web como la capacidad de respuesta a la entrada, que se abarca en este módulo y en el siguiente.

A menudo, JavaScript se describe como un lenguaje de un solo subproceso. En la práctica, esto hace referencia al subproceso principal, que es el único en el que el navegador hace la mayor parte del trabajo que ves en el navegador. Este trabajo incluye tareas involucradas como secuencias de comandos, algunos tipos de procesamiento, análisis de HTML y CSS, y otros tipos de trabajo para el usuario que impulsan la experiencia del usuario. En verdad, los navegadores sí usan otras conversaciones para realizar tareas que tú, el desarrollador, no normalmente tienen acceso directo, como los subprocesos de la GPU.

En lo que respecta a JavaScript, en general, solo debes trabajar en el subproceso principal, pero solo de forma predeterminada. Es posible registrarse y utilizar subprocesos adicionales en JavaScript. La función que permite el uso de varios subprocesos en JavaScript se conoce como la API de Web Workers.

Los trabajadores web son útiles cuando tiene un trabajo costoso en términos de procesamiento que solo no se pueden ejecutar en el subproceso principal sin generar tareas largas que hacen que la página que no responden. Estas tareas pueden afectar la Interacción con Next Paint (INP), por lo que puede resultarte útil saber cuándo tienes trabajos que se realiza fuera del subproceso principal por completo. Esto puede ayudar a crear más espacio para otras tareas en el subproceso principal para que las interacciones del usuario sean más rápidas.

Este módulo y la demostración posterior en la que se muestra un caso de uso concreto abordarán la Web, trabajadores. La demostración en sí muestra cómo puedes usar un trabajador web para realizar el trabajo. de lectura de metadatos de imágenes de un archivo JPEG fuera del subproceso principal y cómo Puede devolver los metadatos al subproceso principal para que el usuario los vea.

Cómo se inicia un trabajador web

Para registrar un trabajador web, se crea una instancia de la clase Worker. Cuando lo hagas Por lo tanto, se especifica la ubicación del código del trabajador web, que carga el navegador. y, luego, crea un nuevo subproceso. El subproceso resultante a menudo se llama un subproceso de trabajo

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

En el archivo JavaScript del trabajador (en este caso, my-web-worker.js) puedes escribir código que, luego, se ejecuta en un subproceso de trabajo separado.

Limitaciones de los trabajadores web

A diferencia de JavaScript que se ejecuta en el subproceso principal, los trabajadores web no tienen acceso directo al contexto window. y tienen acceso limitado a las APIs que proporciona. En la Web Los trabajadores están sujetos a las siguientes restricciones:

• Los trabajadores web no pueden acceder directamente al DOM.
• Los trabajadores web pueden comunicarse con el contexto de window a través de un mensaje por lo que un trabajador web puede acceder de forma indirecta al DOM de alguna forma.
• El alcance del trabajador web es self y no window.
• El ámbito del trabajador web tiene acceso a las primitivas de JavaScript y construcciones, así como APIs como fetch y una gran cantidad de otras APIs.

Cómo se comunican los trabajadores web con window

Es posible que un trabajador web se comunique con el window del subproceso principal. a través de una canalización de mensajería. Esta canalización te permite transportar datos del subproceso principal y el trabajador web. Para enviar datos de un trabajador web a subproceso principal, configura un evento message en el contexto del trabajador web (self)

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

Luego, en una secuencia de comandos en el contexto window del subproceso principal, puedes recibir el elemento mensaje del subproceso del trabajador web mediante otro evento 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);
});

La canalización de mensajería del trabajador web es una vía de escape de la Web en el contexto del trabajador. Al usarlo, puedes enviar datos al window desde el trabajador web. que puedes usar para actualizar el DOM o para realizar otras tareas que debes el subproceso principal.

Ponga a prueba sus conocimientos

A continuación: un caso de uso concreto de un trabajador web

En el siguiente módulo, se detalla un caso de uso concreto de un trabajador web en la que se muestra. En ese módulo, se usa un trabajador web para obtener un archivo JPEG de una y leer los metadatos EXIF en un trabajador web. Luego, esos datos se envían de vuelta al subproceso principal para que el usuario lo vea.