HTML5 Web Workers_Motor Node Java College

El trabajador web dedicado (trabajador web dedicado) proporciona una forma simple de permitir que el contenido web ejecute el script en segundo plano. Una vez que se crea el trabajador, puede pasar el mensaje a la función de monitoreo de eventos especificada por su creador, para que todas las tareas generadas por el trabajador reciban estos mensajes. El hilo del trabajador puede realizar tareas sin interferencia UI. Además, también puede usar xmlhttprequest (aunque los dos valores de atributo de respuesta y canal siempre son nulos) para realizar operaciones de E/S. Este artículo proporciona ejemplos y detalles para formar los documentos anteriores. La función proporcionada a los trabajadores enumera las funciones respaldadas por el trabajador.

La interfaz de los trabajadores generará un hilo de nivel operativo real. Sin embargo, para el trabajador web, los puntos de comunicación con otros hilos se controlarán cuidadosamente, lo que significa que es difícil para usted causar complicaciones. No tiene forma de acceder a los componentes de seguridad no del hilo o los DOM. Entonces, si no gastas algo de esfuerzo, no puedes cometer errores. Generar trabajador

Es muy simple crear un nuevo trabajador. Todo lo que tiene que hacer es llamar al Constructor Worker () y especificar un URI que necesita ejecutar un script que se ejecute en el hilo del trabajador. Función específica de procesamiento de eventos.

 var myworker = new Worker (my_task.js);

O también puede usar addEventListener ():

 var myWorker = New Worker (my_task.js); El trabajador.

La primera línea en el ejemplo crea un nuevo hilo de trabajadores. El tercer acto establece la función de monitoreo del evento de mensaje. Cuando Worker llama a su propia función PostMessage (), se llama a esta función de procesamiento de eventos. Finalmente, el hilo del trabajador se lanzó en la séptima línea. Nota: El URI de parámetro que transmite el constructor de trabajadores debe seguir la estrategia homóloga. En la actualidad, los diferentes fabricantes de navegadores siguen siendo diferentes sobre las cuales los URI deben seguir las estrategias homólogas; Blob Uri.

Los datos transmitidos entre la página de inicio y el trabajador se copian, no se comparten. El objeto transmitido al trabajador debe ser serializado, y luego el siguiente extremo debe ser serializado. La página no comparte el mismo ejemplo que el trabajador. La mayoría de los navegadores usan una copia estructurada para lograr esta característica.

Antes de bajar, con el propósito de enseñar, creemos una función llamada emulación deMessage ().

 Función emulación deMessage (vval) {return eval; // Objectalert (typeOf EmulatingMessage (Ejemplo1); // Número // Test #2Var Ejemplo2 = True; Alert (TypeOf Ejemplo2); // Boolean // prueba #3V #3V AR Ejemplo3 = nueva cadena (Hello World); , Edad: 43}; Var Ejemplo5 = nuevo animal (Cat, 3);

El valor que no se comparte se llama mensaje. Hablemos de Worker, puede usar PostMessage () para pasar el mensaje al hilo principal o enviarlo desde el hilo principal. El atributo de datos del evento de mensaje contiene datos del trabajador.

 var myWorker = New Worker (my_task.js); ;

Nota: En términos generales, los hilos de fondo, incluido el trabajador, inocible para operar DOM. Si el hilo de fondo necesita modificar el DOM, entonces debe enviar el mensaje a su fundador para que el Creador complete estas operaciones.

Como puede ver, el mensaje transmitido entre el trabajador y la página de inicio siempre es "mensaje JSON", incluso si es un tipo de valor original. Por lo tanto, puede transmitir datos JSON y/o cualquier tipo de datos que pueda serializar:

 Postmessage ({cmd: init, timestamp: date.now ()});

Ejemplos para aprobar datos

Ejemplo#1: Crea una "evaluación asíncrona ()" común "

El siguiente ejemplo presenta cómo usar eval () en el trabajador para ejecutar cualquier tipo de código JavaScript en cualquier tipo de asíncrono en el orden ::

 // sintaxis: asynceval (code [, listner]) var asynCeval = (function () {var alistener = [], oposer = nuevo trabajador (datos: text/javascript; charset = us-asiiii, message%20%3d%20function %20%28oevent%29%20%7b%0a%09 PostMessage%28%7b%09%09%22id%22%20oevent. Data%2C%09%22Valuate%22%3a 3a 3a 3a 3a 3a 3a 3a 3a% 20Eval%28oevent.data.code%29%0a%09%7d%29%3b%0a%7d); data.id] (eevent.data.evalued);} eliminar alisteners [eevent.data.id];}; : Alisteners.length -1, código: scode});};});

Ejemplo de uso:

 // Mensaje de alerta asíncrono ... Asynceval (3 + 2, función (smessage) {alerta (3 + 2 = + smesage); // impresión asíncrona ... asynceval (// hello world !!!/,,, function (Shtml) {document.body.appendChild (document.createTextNode (shtml);}); .open (/get/, /http://www.mozilla.org//, falso);/n/toreq.send (null);/n/treturn oreq.responsetext;/n});)););) );));));));));)));));));)));)));)));)););)););;

Ejemplo#2: Transfiera el método avanzado de JSON y cree un sistema de intercambio

Si necesita transmitir datos muy complicados y debe llamar a múltiples métodos en la página de inicio y al trabajador al mismo tiempo, puede considerar crear un sistema similar al siguiente.

 <! argumento para aprobar 1, argumento para pasar 2, etc., etc.): llama a la función de consulta de un trabajador * PostMessage (String o JSON Data): ver Worker.protodype. Función): agrega un oyente * removeVeListener (nombre): elimina un oyente queyker instancia propiedades: * defaultListListener: el ejecutor de oyente predeterminado solo cuando el trabajador llama a la función postmessage () directamente */ función QueryableWorker (Surl, fdefListener, fonerror) {var var) Oinstance = this, oworcer = new Worker (Surl), olistener = {}; .data.hasownproperty (rnb93qh) {olisteners [eevent.data.vo42t30] .Apply (oievent.data.rnb99 3qh);} más {this.defaultListener.call (oinstance, oevent.data);}; {owster.onerror = fonerror;} this.sendQuery = function (/ * Nombre de la función consultable, argumento para pasar 1, argumento para pasar 2, 2, 2, etc. etc. */) {if (argumentos.length <1) { Tirar new Typerror (Queryableworker.sendQuery -Not suficiente argumentos); = Function (vmsg) {// Solo creo que no hay necesidad de usar la llamada () ¿Qué tal solo de (vmsg); Prototy Worker.prototype.postMessage.call (oworker, vmsg); ] = Flistener;}; ] * /); // Su oyente personalizado omytask.addlistener (printsometh ing, function (nResult) {document.getElementById (FirstLink) .ParentNode.AppendChild (document.CreateTextNode (la pantalla es + nresult +!);};} ); A ID = FirstLink href = javaScript: omytask.sendQuery ('getDiFferente', 5, 3);> ¿Cuál es la diferencia entre 5 y 3? omytask.sendQuery ('waitSomething'); ) {// Do Something} Funct} Funct ion myPrivateFunc2 () {// haz algo} // etc.// sus funciones públicas personalizadas (es decir, consulta desde la página principal) var consultación = {// Ejemplo #1: Obtenga la diferencia entre dos nightrs: getDiFference: function (nminund, nsubtrahend) {Respuesta (printsomething, nminUnd -nsubtrahend);}, // Ejemplo #2: espera tres segundos waitSomom: function () {setTimeout (function () {alererererererererererererererererererer tsomething, 3, sexo);}, 3000);}}; (/ * Nombre del oyente, argumento para aprobar 1, argumento para pasar 2, etc., etc. */) {if (argumentos.length <1) {tire typerror (respuesta -not enugh argumentos); : Argumentos [0], rnb93qh: array.prototype.slice .call (argumentos, 1)});} onMessage = function (oevent) {if (eevent.data instancia de objeto && sownproperty) && daeenPropty (bk4e1h0) .hasownproperty (ktp3fm1)) {QueryableFunction [eevent.data .bk4e1h0] .apply (self, oevent.data.ktp3fm1);} else {defaultQuery (eevent.data);}};

Este es un método muy adecuado para cambiar las noticias entre la página de inicio-trabajador, o lo opuesto, lo opuesto, lo contrario.

Transferir datos transfiriendo la propiedad (objeto transferible)

Google Chrome 17 y Firefox 18 incluyen otro método con un mayor rendimiento para pasar el tipo específico de objeto (objeto transferible) a un trabajador/regreso del trabajador. El objeto de transferencia se transfiere de un contexto a otro contexto sin ninguna operación de copia. Esto significa que obtendrá una gran mejora del rendimiento al pasar Big Data. Si viene del mundo C/C ++, imagínelo como una transmisión según la referencia. Sin embargo, a diferencia de la transmisión de acuerdo con la referencia, una vez que se transfiere el objeto, la versión de que el contexto original ya no existirá. La propiedad del objeto se transfiere al nuevo contexto. Por ejemplo, cuando transfiere un objeto ArrayBuffer desde la aplicación principal al trabajador, el ArrayBuffer original se borra y no se puede usar. El contenido que contiene (completo) se pasará al contexto del trabajador.

 // Cree un archivo de 32 MB y lléntelo.var uint8Array = new Uint8aray (1024*1024*32); ;

Si es necesario, el trabajador puede generar más trabajadores. Esto se llama Subworker, que debe alojar en la misma fuente que la página principal. De la misma manera, Subworker analiza la dirección del URI en lugar de su propia página en lugar de su propia página. Esto hace que el trabajador monitoree fácilmente su dependencia. Chrome no admite el subsorker.

Actualmente no existe un método "oficial" que pueda incrustar el código de los trabajadores en una página web como elementos <script>. Pero si un elemento <script> no tiene características SRC, y sus características de tipo no se especifican como un tipo MIME de tipo MIME, se considerará un elemento de bloque de datos y puede ser utilizado por JavaScript. "Bloque de datos" es una característica muy común en HTML5, que puede transportar casi cualquier tipo de datos de tipo de texto. Por lo tanto, puede incrustar a un trabajador de la siguiente manera:

 <! . Var myvar = Hola mundo!; </script> <script type = text/javaScript> // El script será analizado por el motor JS porque su tipo mime es text/javaScript. Función pagelog (smsg) {// use fragmento: de esta manera, el navegador solo representará/criará. Var OfRagm = Document.CreateDocumentFragment (); -Workr> // Este script no será analizado por el motor JS porque su tipo mime es texto/JS-Worker. onMessage = function (Oevent) {PostMessage (myVar);}; // El código del trabajador restante está escrito aquí. </script> <script type = text/javaScript> // El script será analizado por el motor JS porque su tipo mime es text/javaScript. // En el pasado ...: // usamos blob builder // ... pero ahora usamos blob ...: var blob = new blob (array.prototype.map.call (documens.quelyselectory (script [type = =/text // js- workr/], function (oscript) {return Oscript.TextContent;}), {Tipo: Text/JavaScript}); . document.Worker = New Worker (Window.Url.CreateObjectUrl (blob)); () {document.worker.postMessage ();};

Ahora, el trabajador integrado se ha establecido en una propiedad personalizada de documentos.

El trabajador puede usar el tiempo de espera y el intervalo como el hilo principal. Esto será muy útil, por ejemplo, si desea que el hilo del trabajador sea periódicamente sin un código de ejecución ininterrumpido.

Si desea cancelar un trabajador de inmediato, puede llamar al método terminado () de trabajador ::

 myworker.merminate ();

El hilo del trabajador será asesinado de inmediato y no dejará ninguna oportunidad para dejar que complete su propia operación o trabajo de limpieza.

Los trabajadores también pueden llamar a su propio método nsiworkerscope.close () para cerrar usted mismo:

 self.close ();

Cuando el trabajador es errores de tiempo de ejecución, se llama a su función de procesamiento de eventos OnError. Recibe un evento que implementa el error del nombre de la interfaz de ErroreVent. El incidente no será burbujeante y puede cancelarse; El evento de error tiene los siguientes tres campos interesados ​​en:

Mensajes de error legibles.

Error Nombre del archivo de script.

El número de línea del archivo de script cuando ocurre un error.

Los trabajadores pueden acceder a los objetos de navegador en su alcance. Contiene la siguiente cadena que puede reconocer el navegador, como hacerlo en scripts ordinarios:

• Eappname
• IAppversion
•  Plataforma
• Tuserogente

El hilo de trabajadores puede acceder a una función global, importscripts (), que permite al trabajador introducir el script o la biblioteca en su propio alcance. Puede introducir el URI sin aprobar los parámetros, o al URI de múltiples scripts;

 Importscripts (); */

El navegador carga y ejecuta el script. Los objetos globales en cada script pueden ser utilizados por el trabajador. Si el script no se puede cargar, se lanzará la excepción Network_Error y el siguiente código no se ejecutará. El código que se ejecutó anteriormente (incluido el código ejecutado usando Window.setTimeout ()) aún se puede utilizar. La declaración de función después de importscripts () aún se puede usar porque siempre se están ejecutando antes de otro código. Nota: El orden de descarga del script no se soluciona, pero el pedido se pasará a los insportscripts () () cuando se ejecute. Esto se completa simultáneamente;

Esta sección proporciona varios ejemplos de cómo usar DOM Worker.

Ejecutar operaciones en segundo plano

Una de las ventajas del trabajador es que puede ejecutar la operación densa del procesador sin bloquear el hilo de la interfaz de usuario. En el siguiente ejemplo, el trabajador se usa para calcular Fibona.

Código JavaScript

El siguiente código JavaScript se almacena en el archivo "Fibonacci.js", que está asociado con el archivo HTML en la siguiente sección.

 VAR Results = []; function Errorreceiver (Event) {Throw Event.Data;} OnMessage = Function (Event) {var n = parseInt (event.data); } Para (var i = 1; i <= 2; i ++) {var Worker = New Worker (fibonacci.js);

El trabajador establece el atributo onMessage a una función. (Tenga en cuenta que este uso no es lo mismo que definir una variable global con el mismo nombre, o una función del mismo nombre. El mensaje enviado por la página web.) Esto habilitará la recursión y generará su nueva copia para procesar cada ciclo de cálculo.

Código HTML

 <! = New Worker (Fibonacci.js); = función (error) {dump (error de trabajo: + error.message +/n);

La página web crea un elemento Div, el ID es el resultado, lo usa para mostrar el resultado del cálculo y luego generar un trabajador. Después de generar un trabajador, la función de procesamiento de OnMessage está configurada para mostrar los resultados del cálculo configurando el contenido del elemento DIV, y luego la función de procesamiento de OnError se establece en la información de error de almacenamiento. Finalmente, envíe un mensaje al trabajador para comenzar.