Noticias Programación

Lienzo de JavaScript: trabajadores web

Página 1 de 3

Los gráficos necesitan poder de procesamiento. En este extracto del libro de Ian Elliot sobre gráficos de JavaScript, analizamos cómo comenzar con Web Workers para hacer el trabajo más rápido.


Ahora disponible como libro de bolsillo o libro electrónico de Amazon.

Gráficos de mapa de bits de JavaScript
Con Lona

Contenido

Gráficos de JavaScript Introducción a dibujar rutas en lienzo
Extracto: Caminos básicos
Extraer: Trazo y Relleno de curvas Bezier
Extracto: Propiedades del trazo
Extraer: Relleno y Agujeros
Resumen: Transformaciones de degradados y rellenos de patrón
Resumen: Transformaciones
Extraer: coordenadas personalizadas
Extraer el texto del estado del gráfico
Resumen: texto, tipografía y SVG
Resumen: recorte, composición y efectos Unicode
Resumen: Recorte y composición básicos para la generación de mapas de bits
Resumen: Introducción a los mapas de bits
Extracto: Animación WebWorkers y OffscreenCanvas
Extracto: Web Workers ** ¡NUEVO!
Extracto: Fuera de pantalla
Manipulación de bits en JavaScript
Extracto: archivos de matriz escritos con manipulación de bits, BLOB, URL y recuperación
Extraer: Blob y archivo
Extraer: procesamiento de imágenes de lectura/escritura de archivos locales
Extraer: ImageData
Extracto: la API de filtro
3D WebGL
Resumen: WebGL 3D 2D WebGL
Extracto: Convoluciones WebGL

Incluso si puede hacer que su animación funcione lo suficientemente rápido, todavía tiene el problema de las pausas que ocurren cada vez que el subproceso de la interfaz de usuario tiene que lidiar con otra cosa. Hay situaciones en las que la animación puede congelarse durante mucho tiempo. La solución es mover la animación del subproceso de la interfaz de usuario a un subproceso diferente.

Hasta hace poco, no había forma de que un programador de JavaScript pudiera aprovechar el sistema operativo para programar subprocesos o múltiples núcleos para implementar un paralelismo real, pero ahora tenemos trabajadores web que implementan el procesamiento en segundo plano en un subproceso sin interfaz. El único problema es que un trabajador web no puede acceder al DOM y el objeto canvas es parte del DOM. Para que sea posible implementar el procesamiento de gráficos fuera del subproceso de la interfaz de usuario, se introdujo el objeto OffscreenCanvas. Todavía es razonablemente nuevo y, al momento de escribir este artículo, Chrome es el único navegador que lo admite por completo. Si bien es compatible con Firefox, está deshabilitado de forma predeterminada y se debe configurar un indicador para habilitarlo, y nuevamente solo es compatible con el contexto gráfico de WebGL.

Vale la pena aclarar que, si bien OffscreenCanvas se introdujo como algo para hacer que la animación sea más fluida, casi todas las operaciones con uso intensivo de gráficos se implementan mejor como un trabajador web. De hecho, cualquier operación intensiva de cualquier tipo se implementa mejor de esta manera.

Antes de ver cómo usar OffscreenCanvas, debemos conocer los conceptos básicos del uso de un trabajador web.

Trabajador web básico

La buena noticia es que los trabajadores web son muy fáciles de usar. Lo que es un poco difícil de manejar es averiguar qué no está permitido hacer y obtener una comunicación simple entre los cables. Idealmente, debe envolver cualquier negocio web que cree como Promise para que el código sea más fácil de usar, pero por ahora es mejor si es más simple.

En realidad, solo hay un objeto clave cuando se usan trabajadores web, el objeto Worker, que automáticamente inicia un nuevo hilo y comienza a ejecutar el código JavaScript tan pronto como se crea.

La acción básica es que el trabajador cargue el archivo JavaScript especificado en su constructor e inicie la ejecución del script en un nuevo subproceso. Puede evitar usar un archivo separado para almacenar su código, pero es complicado y es mejor evitarlo. La razón por la que el código está en un archivo separado es para mantener separados los contextos de ejecución en los subprocesos. Es decir, el programa que se inicia en el nuevo subproceso de trabajo no tiene variables compartidas con el código que lo crea.

Entonces, por ejemplo, si tiene un programa almacenado en myScript.js, la instrucción para ejecutarlo es:

var trabajador = nuevo trabajador («myScript.js»);

Si bien esto es simple, hay una sutileza que debes aclarar si quieres evitar cometer errores estúpidos.

Dos cosas suceden cuando creas un objeto Worker.



El código almacenado en myScript.js, o cualquier otro archivo especificado, se carga y se configura para ejecutarse mediante un nuevo subproceso a nivel del sistema operativo.



Se crea un objeto de trabajo en el subproceso de la interfaz de usuario, y este es el objeto que el código JavaScript «estándar» que se ejecuta en el subproceso de la interfaz de usuario puede usar para comunicarse con el nuevo subproceso de trabajo.



Si crees que esto es obvio y no es necesario decirlo, mucho mejor.

trabajador


En el ejemplo anterior, el trabajador es un objeto que existe en el subproceso de la interfaz de usuario y «myScript.js» se carga y ejecuta de forma aislada del subproceso de la interfaz de usuario y del programa al que pertenece el trabajador. Por supuesto, el objeto Worker proporciona métodos que permiten la comunicación entre los dos programas y esto es algo que necesitamos saber cómo usarlo.

Si necesita cargar una biblioteca en el código de subprocesos de trabajo, puede usar la función importScripts. Simplemente proporcione las URL de los scripts para cargar como parámetros. Los scripts se descargan en cualquier orden, pero se ejecutan en el orden especificado. La función importScripts es síncrona y se bloquea hasta que se hayan descargado todas las bibliotecas. Puede intentar cargar las bibliotecas estándar en un subproceso de trabajo pero, como el DOM no está disponible, es posible que no funcionen. Por ejemplo, jQuery ciertamente no funciona, ya que necesita el DOM para funcionar.

También puede gustarte...