Share
Un trabajador web es un script JS que se ejecuta en segundo plano, por separado de otros scripts, lo que nos permite introducir subprocesos en nuestras aplicaciones web. Aunque no es parte de la especificación HTML5, los trabajadores web pueden usarse con aplicaciones HTML5. En este Consejo rápido, veremos cómo usarlos..
En la tierra de HTML5 tenemos algunas API muy interesantes disponibles. Algunos de ellos, como Web Workers, son útiles para aumentar el rendimiento, lo cual es muy importante tanto para las aplicaciones como para los juegos. Pero, ¿cómo trabajan los trabajadores de la web??
Cada instancia de un trabajador web crea otro hilo, en el que se ejecuta JavaScript. Usted crea una instancia como esta:
Accentsconagua
var worker = new Worker ('filename.js'); Aquí, 'filename.js' es el nombre del archivo que contiene su script. Debido a que los trabajadores son entornos individuales, no puede utilizar el código incrustado directamente en HTML; debes usar un archivo separado.
Los trabajadores no tienen acceso a la página DOM o al objeto global, entonces, ¿cómo se comunican con el sitio? Es sencillo. Cuando desea enviar algunos datos de su página a un Trabajador, invoca mensaje posterior ().
Esto requiere un parámetro: datos para enviar, que puede ser una cadena o un objeto analizable JSON (lo que significa que no puede pasar funciones o referencias circulares, o obtendrá un DOM_EXCEPTION). En algunos navegadores hay un problema con los objetos, por lo que siempre es mejor analizar manualmente el objeto con JSON.parse () para que no tenga que preocuparse por implementaciones incompletas.
Lo mismo ocurre si está enviando datos desde un Trabajador a la página: simplemente invoque mensaje posterior () en yo, que se refiere al alcance global del trabajador. (Haces esto dentro del guión del trabajador, por supuesto).
Luego, para recibir los datos hay que adjuntar un un mensaje controlador de eventos. Hay dos formas de hacerlo, al igual que con los eventos regulares para los elementos DOM; Usted puede asignar directamente alguna función al trabajador un mensaje propiedad, o puede utilizar addEventListener ().
// Primera forma: worker.onmessage = function (e) console.log (e.data); // Registre los datos pasados // Segunda forma: worker.addEventListener ('mensaje', función (e) console.log (e.data); // Registre los datos pasados); Es su elección qué método utilizar. De cualquier manera, el parámetro de la función será un evento objeto, y los datos que envió utilizando mensaje posterior () se pasará a través de la datos propiedad de este evento.
Está bien, pero ¿y si tenemos que usar alguna biblioteca externa? No tenemos acceso al DOM o al ámbito global, por lo que no podemos simplemente inyectar el script.
Por supuesto que no es necesario, hay una función para eso. Se llama importScripts () y acepta uno o más argumentos: nombres de script para cargar dentro del alcance del Worker. Debe tener en cuenta que los scripts que se pasan a esta función se cargan en un orden aleatorio, pero se ejecutarán según lo especificado y la ejecución del script se detendrá hasta que se carguen..
importScripts ('one-lib.js'); // Carga un script importScripts ('first-lib.js', 'second-lib.js', 'third-lib.js'); // carga tres scripts Puedes usar importScripts en cualquier lugar de su código, facilitando la creación de solicitudes JSONP dentro de los Trabajadores, como lo haremos en el siguiente ejemplo.
Bien, entonces ahora probablemente quieras ver a un Trabajador en acción. En lugar de mostrar algo bastante inútil, como obtener números primos o números de Fibonacci, he decidido hacer algo que tal vez usará después de algunos cambios..
La secuencia de comandos de ejemplo (he incluido solo el código del trabajador, el resto es fácil de hacer) obtendrá los últimos 100 tweets de @envatoactive (debemos establecer el recuento en 121 en lugar de 100, ya que Tweeter API envía menos tweets que solicitado - no me preguntes por qué, no sé.
Aquí está el código que iría dentro del archivo de script del Trabajador Web real:
// Función auxiliar para procesar los datos var proceso = función (datos) // Iterar a través de los datos; sabemos que es una matriz, por lo que es seguro para (var i = 0, v; v = data [i]; i ++) // Y pasar el texto de Tweet a la página self.postMessage (text: v.text); // Después de que el trabajo haya terminado, hágale saber a la página self.postMessage ("finalizado"); // Adjuntar el detector de eventos para manejar los mensajes self.addEventListener ('message', function (event) // Verificar si el comando enviado fue 'start' // No es necesario aquí, pero puede ser útil más adelante si (event.data == "inicio") // Responda a la página en la que comenzamos el trabajo self.postMessage ("iniciado"); // Núcleo del script, obtenga los Tweets // El parámetro de devolución de llamada especifica la función que se ejecutará después de que se realice la solicitud // (Llamamos a la función process (), definida anteriormente). // Count tiene que ser 121 porque la API de Tweeter está enviando una menor cantidad de datos que los importScripts solicitados ("http://twitter.com/statuses/user_timeline/envatoactive". json? callback = process & count = 121 ");); Debe ser fácil comprender cómo funciona todo esto a partir de los comentarios. Esto le permite a su aplicación cargar todos los tweets en segundo plano, usando un hilo separado.
Ahora intente insertar el siguiente código equivalente, que no hace en su lugar, utilice trabajadores web, en el encabezado de una página vacía, y observe el retraso. (Todavía es pequeño, pero imagínate si no estuvieras recibiendo 100 sino 100,000 Tweets):
Como puede ver, los trabajadores web le ofrecen una forma sencilla de eliminar el retraso de su GUI y mover cálculos complicados o redes a hilos separados.
Espero que hayas aprendido algo nuevo de este artículo: ¿quizás utilizarás Trabajadores en tu próximo proyecto? Si tiene alguna pregunta o problema por favor comentar abajo.
