Una introducción a la API JavaScript de los trabajadores web

Trabajadores Web es una API de JavaScript que te permite Ejecutar scripts en un hilo separado del principal. Puede ser útil cuando no desea ningún obstáculo en la ejecución de los scripts principales, debido a los scripts de fondo-esque.

La API de los trabajadores web es Compatible con casi todos los navegadores, Para obtener información más detallada, eche un vistazo a los documentos de CanIUse. Antes de entrar en el código, veamos un par de situaciones en las que es posible que desee utilizar esta API para tener una idea de a qué me refiero. scripts de fondo-esque.

Casos de uso

Digamos que hay un guión que busca y procesa un archivo. Si un archivo es importantemente ¡Tardará mucho tiempo en procesarse! Lo que podría detener otros scripts que fueron invocados más tarde de ser ejecutados.

Sin embargo, si el el procesamiento de archivos se mueve a un hilo de fondo, conocido como el hilo de trabajador, otros eventos no serán bloqueados hasta que el anterior termine.

La secuencia de comandos ejecutado en un hilo de trabajador de fondo es conocido como el guion del trabajador o simplemente el obrero.

Por otro ejemplo, imagina que hay un Forma grande, dispuesta en pestañas.. Está programado de forma que los controles de actualización en una pestaña Afecta algunos de los controles en otros..

Si la actualización de las otras pestañas lleva algún tiempo, el usuario no se puede usar continuamente la pestaña actual sin que sus eventos queden en suspenso. Esto podría congelar la interfaz de usuario, para consternación del usuario.

Dado que un usuario no verá las otras pestañas mientras llena una actual, puede actualizar los controles de las otras pestañas en un hilo de fondo. De esta manera, el usuario puede continuar utilizando la pestaña actual que está completando, sin que ninguno de sus scripts sea bloqueado por el proceso de actualización de los controles en otras pestañas.

Del mismo modo, si encuentra un escenario donde un script podría impedir que un usuario use la interfaz de usuario hasta que se complete su ejecución, puede considerar moverlo a un subproceso de trabajo, para que pueda ejecutarse en segundo plano.

Ámbitos y tipos de trabajadores.

La API de los trabajadores web es probablemente una de las API más simples para trabajar. Tiene métodos bastante sencillos para crear hilos de trabajo y Comunicarse con ellos desde el guión principal..

El alcance global de un subproceso de trabajo está en un contexto diferente del subproceso principal. Tú No se puede acceder a los métodos y propiedades de ventana objeto como alerta() dentro de un hilo de trabajador. Tu también no se puede cambiar el DOM directamente de un hilo de trabajador.

Sin embargo tu puede utilizar muchas API que vienen bajo ventana, por ejemplo Promesa y Ha podido recuperar, en su hilo de trabajador (vea la lista completa).

También puedes tener subprocesos de trabajo anidados: hilos de trabajo creados a partir de otro hilo de trabajo. Un trabajador creado por otro se llama trabajador secundario.

Tambien hay muchos tipos de trabajadores. Los dos principales son trabajadores dedicados y compartidos.

Trabajadores dedicados Pertenecen al mismo contexto de navegación. que pertenece a su hilo principal. Los trabajadores compartidos, sin embargo, son Presente en un contexto de navegación diferente. (por ejemplo, en un iframe) del script principal. En ambos casos, el guión principal y los trabajadores. Tiene que estar en el mismo dominio..

El ejemplo en este tutorial será sobre trabajador dedicado, cual es el tipo mas comun.

Métodos API

Vea el diagrama de abajo para una Resumen rápido de todos los métodos principales. que constituyen la API de los trabajadores web.

los Obrero() constructor crea un hilo de trabajo dedicado y devuelve su objeto de referencia. Luego, usamos este objeto para comunicarnos con ese trabajador específico.

los mensaje posterior () El método se utiliza tanto en el script principal como en el de trabajo para enviar datos entre sí. Los datos enviados son recibidos en el otro lado por el un mensaje controlador de eventos.

los Terminar() método termina un hilo de trabajo desde el script principal. Esta terminacion es inmediato: cualquier ejecución de script actual y scripts pendientes serán cancelados. los cerrar() El método hace lo mismo, pero es Llamado por el hilo trabajador cerrándose.

Código de ejemplo

Ahora, veamos algunos ejemplos de código. los index.html página contiene el guión principal dentro de una

Comenzamos con el Creación del hilo de trabajo desde el script principal..

  w = nuevo trabajador ('worker.js'); 
 los Obrero() constructor toma la URL del archivo del trabajador como su argumento.
 Luego, agregamos un controlador de eventos para el un mensaje evento de la instancia de trabajador recién creada para recibir datos de ella. los datos propiedad de la mi evento mantendrá los datos recibidos.
  w = nuevo trabajador ('worker.js'); w.onmessage = (e) => console.log ('Received from worker: $ e.data');  
 Ahora usamos mensaje posterior () a enviar algunos datos al hilo trabajador en el clic de un botón. los mensaje posterior () El método puede tomar dos argumentos. El primero puede ser de cualquier tipo (cadena, matriz ...). Son los datos para ser enviado al hilo trabajador (o al script principal, cuando el método está presente en el subproceso de trabajo).
 El segundo parámetro opcional es una matriz de objetos que puede ser utilizado por los hilos de trabajo (pero no por el script principal, o viceversa). Este tipo de objetos se llaman Transferible objetos.
  document.querySelector ('button'). onclick = () => w.postMessage ('john');  
 Solo estoy enviando un valor de cadena al subproceso de trabajo.
 En el subproceso de trabajo, necesitamos agregar un un mensaje controlador de eventos que recibirá los datos Enviado por el script principal al hacer clic en el botón. Dentro del manejador, nosotros concatenar la cadena recibida con otra y devolver el resultado al script principal..
  console.info ('trabajador creado'); onmessage = (e) => postMessage ('Hola $ e.data');  
 A diferencia del guión principal donde tuvimos que usar el w objeto de referencia a refiérase al hilo específico del trabajador en el que el guión luego usa el un mensaje y mensaje posterior métodos, hay no es necesario un objeto de referencia en el subproceso de trabajo para apuntar al hilo principal.
 El código funciona de la siguiente manera. Cuando el navegador carga index.html, la consola mostrará el "trabajador creado" mensaje tan pronto como el obrero() El constructor se ejecuta en el hilo principal., creando un nuevo trabajador.
 Cuando haga clic en el botón en la página, obtendrá el "Recibido del trabajador: Hola John" mensaje en la consola, que es la cadena que estaba concatenado en el hilo de trabajo con los datos enviados a ella, y luego fue enviado de vuelta al guión principal.