Hasta ahora, gran parte del contenido de este curso se centró en conceptos como consideraciones generales del 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 a la entrada del usuario, así como la carga diferida de recursos específicos.
Sin embargo, hay un aspecto del rendimiento relacionado con JavaScript que aún no se abordó en este curso, y es la función de los trabajadores web a la hora de mejorar la capacidad de respuesta de entrada, que se aborda 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 se refiere al subproceso principal, que es el único subproceso en el que el navegador realiza la mayor parte del trabajo que ves en él. Este trabajo incluye tareas como la escritura de secuencias de comandos, algunos tipos de trabajos de renderización, el análisis de HTML y CSS, y otros tipos de trabajos para el usuario que mejoran la experiencia del usuario. En realidad, los navegadores sí usan otros subprocesos para realizar trabajos al que tú, como desarrollador, no tienes acceso directo, como los subprocesos de GPU.
En lo que respecta a JavaScript, generalmente estás limitado a realizar el trabajo en el subproceso principal, pero solo de forma predeterminada. Es posible registrar y utilizar subprocesos adicionales en JavaScript. La función que permite varios subprocesos en JavaScript se conoce como la API de Web Workers.
Los trabajadores web son útiles cuando tienes trabajo costoso en términos de procesamiento que no se puede ejecutar en el subproceso principal sin causar tareas largas que hacen que la página no responda. Sin duda, esas tareas pueden afectar la Interacción al próximo procesamiento de imagen (INP) de tu sitio web, por lo que puede ser útil saber cuándo tienes trabajo que se puede realizar por completo fuera del subproceso principal. Esto puede ayudar a crear más espacio para otras tareas en el subproceso principal, de modo que las interacciones del usuario sean más rápidas.
En este módulo y en la demostración posterior que muestra un caso de uso concreto, se abordan los trabajadores web. En la demostración, se muestra cómo puedes usar un trabajador web para realizar el trabajo de leer metadatos de una imagen de un archivo JPEG fuera del subproceso principal y cómo puedes regresar esos metadatos al subproceso principal para que los vea el usuario.
Cómo se inicia un trabajador web
Para registrar un trabajador web, se crea una instancia de la clase Worker. Al hacerlo, especifica dónde se encuentra el código del trabajador web, que carga el navegador y, luego, crea un subproceso nuevo. El subproceso resultante a menudo se denomina subproceso de trabajo.
const myWebWorker = new Worker('/js/my-web-worker.js');
En el archivo JavaScript del trabajador (my-web-worker.js en este caso), puedes escribir código que, luego, se ejecute 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. Los trabajadores web están sujetos a las siguientes restricciones:
- Los trabajadores web no pueden acceder directamente al DOM.
- Los trabajadores web pueden comunicarse con el contexto
windowa través de una canalización de mensajería, lo que significa que un trabajador web puede acceder indirectamente al DOM de alguna manera. - El alcance del trabajador web es
self, en lugar dewindow. - El alcance del trabajador web tiene acceso a las construcciones y primitivas de JavaScript, además de a APIs como
fetchy una cantidad bastante grande de otras APIs.
Cómo se comunican los trabajadores web con window
Es posible que un trabajador web se comunique con el contexto window del subproceso principal a través de una canalización de mensajería. Esta canalización te permite transferir datos
desde y hacia el subproceso principal y el trabajador web. Para enviar datos de un trabajador web al 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 mensaje del subproceso del trabajador web con 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 forma de evadir el contexto del trabajador web. Con él, puedes enviar datos al window desde el trabajador web y usarlo para actualizar el DOM, o bien realizar otras tareas que deben realizarse en el subproceso principal.
Pon a prueba tus conocimientos
¿En qué subproceso se ejecuta un trabajador web?
¿A qué puede acceder un trabajador web?
window, incluido fetch.
window, pero solo de forma indirecta¿Cómo puede un trabajador web acceder al contexto “window”?
window
window de ninguna manera.
postMessage en el contexto de trabajadores web (self)
A continuación: un caso de uso concreto de un trabajador web
En el siguiente módulo, se detalla y se muestra un caso práctico concreto de un trabajador web. En ese módulo, se usa un trabajador web para recuperar un archivo JPEG de una URL determinada y leer sus metadatos Exif en un trabajador web. Esos datos se envían de vuelta al subproceso principal para que se muestren al usuario.