Antes de HTML5, JavaScript se ejecuta en navegadores funcionó de manera única. Aunque había muchas formas de implementar simulaciones de múltiples hilos (como el método SetInterval, el método de setTimeout, etc. en JavaScript), en esencia, las ejecuciones del programa todavía lo realizan el motor JavaScript de una manera única. Los subprocesos de trabajadores introducidos en HTML5 permiten que el motor JavaScript del lado del navegador ejecute el código JavaScript simultáneamente, logrando así un buen soporte para la programación multiproceso del lado del navegador.
Múltiple lectura en JavaScript - WebWorker Los trabajadores web en HTML5 se pueden dividir en dos tipos de hilos diferentes, uno es el trabajador dedicado de hilo dedicado y el otro es el hilo compartido trabajador compartido. Los dos tipos de hilos tienen diferentes usos. Trabajador web especialUn trabajador dedicado está conectado al script que lo creó. Puede comunicarse con otros trabajadores o componentes del navegador, pero no puede comunicarse con el DOM. El significado de dedicado es que este hilo solo procesa un requisito a la vez. Los hilos dedicados se implementan en varios navegadores principales, excepto IE y se pueden usar con confianza.
Crear hiloCrear un trabajador es simple, simplemente pase el nombre del archivo del archivo JavaScript que debe ejecutarse en el subproceso al constructor.
Comunicación de hiloLa comunicación entre el hilo principal y el hilo infantil utiliza los métodos posteriores alMessage y OnMessage del objeto de subproceso. No importa quién envíe datos a quién, el envío y el envío utiliza el método postmessage, y el receptor usa el método OnMessage para recibir datos. Postmessage solo tiene un parámetro, es decir, los datos aprobados, y OnMessage solo tiene un parámetro. Suponga que es el evento, los datos recibidos se obtienen a través de event.data.
Enviar datos JSONJSON es algo respaldado de forma nativa por JS. No necesita usarse para nada. Simplemente use datos complejos en JSON. Por ejemplo:
postmessage ({'cmd': 'init', 'timestamp': date.now ()});
Errores de manejoCuando se produce un error en un hilo, se llamará a su devolución de llamada de evento OnError. Por lo tanto, la forma de lidiar con los errores es muy simple, que es montar el evento OnError de la instancia de subproceso. Esta función de devolución de llamada tiene un error de parámetro, que tiene 3 campos: mensaje - mensaje de error; nombre de archivo: archivo de script donde ocurrió el error; Lineno - Línea donde ocurrió el error.
Destruir hilosDentro del hilo, use el método cerrado para destruirse. En el hilo principal fuera del hilo, el método terminado de la instancia de hilo se usa para destruir el hilo.
El siguiente es un ejemplo para ver la operación básica de los subprocesos:
Código HTML:
<! Doctype html>
<html>
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Web Worker Fibonacci </title>
<script type = "text/javaScript">
onload = function () {
var trabajador = nuevo trabajador ('fibonacci.js');
trabajador.onmessage = function (evento) {
console.log ("resultado:" + event.data);
};
Worker.onerror = function (error) {
console.log ("Error:" + error.message);
};
trabajador.postMessage (40);
}
</script>
</ablo>
<Body>
</body>
</html>
Código del archivo de script fibonacci.js:
//fibonacci.js
var fibonacci = function (n) {
regresar n <2? n: argumentos.callee (n - 1) + argumentos.callee (n - 2);
};
onMessage = function (evento) {
var n = parseint (event.data, 10);
postmessage (fibonacci (n));
};
Póngalos en el mismo directorio, ejecute el archivo de página y vea la consola para ver los resultados de la ejecución.
Hay otro punto aquí. En el hilo principal, el evento OnMessage se puede enganchar de otra manera:
Worker.adDeventListener ('Mensaje', function (Event) {
console.log ("resultado:" + event.data);
}, FALSO);
Personalmente, creo que es muy problemático, así que ¿por qué no usar OnMessage directamente?
Usar otros archivos de scriptLos trabajadores pueden usar el método global importscripts para cargar y usar otros archivos de script en dominio o bibliotecas de clases. Por ejemplo, las siguientes son formas legales de usar:
importscripts ();/ * no importa nada */
importscripts ('foo.js'); / * Importa solo "foo.js" */
importscripts ('foo.js', 'bar.js');/ * Imports dos scripts */
Después de importar, puede usar directamente los métodos en estos archivos. Vea un pequeño ejemplo en línea:
/**
* Use el método ImportScripts para introducir scripts de recursos externos, aquí usamos la biblioteca de herramientas de cálculo de fórmula matemática Math_utilidades.js
* Cuando el motor JavaScript carga este archivo de recursos, continúe ejecutando el siguiente código. Al mismo tiempo, se puede acceder al siguiente código y llamar
* Variables y métodos definidos en el archivo de recursos.
**/
importscripts ('Math_utilidades.js');
onMessage = function (evento)
{
var primero = event.data.first;
var Second = Event.Data.Second;
calcular (primero, segundo);
};
Función Calcular (primero, segundo) {
// hacer el trabajo de cálculo
var común_divisor = divisor (primero, segundo);
var común_multiple = múltiplo (primero, segundo);
Postmessage ("¡Trabajo hecho!" +
"El múltiplo menos común es" + Common_Divisor +
"Y el mayor divisor común es"+Common_Multiple);
}
Algunos internautas en Internet también pensaron en utilizar el método ImportScripts aquí para resolver el problema de la precarga de recursos (el navegador precarga los recursos sin analizar y ejecutar los recursos), y la razón también es muy simple.
Anidación de hilosEn el hilo de trabajadores, también puede crear hilos infantiles, y varias operaciones son las mismas.
Problemas de sincronizaciónEl trabajador no tiene un mecanismo de bloqueo, y los problemas de sincronización multiproceso solo pueden resolverse mediante código (como la definición de las variables de señal).
Warkwebworker Los trabajadores web compartidos son principalmente adecuados para los problemas de concurrencia de conexión múltiple. Debido a que necesita lidiar con múltiples conexiones, su API es ligeramente diferente de los trabajadores dedicados. Además de esto, los trabajadores web compartidos, como los trabajadores dedicados, no pueden acceder al DOM, y el acceso a las propiedades del formulario también está restringido. Los trabajadores web compartidos tampoco pueden cruzar las comunicaciones.Los scripts de página pueden comunicarse con trabajadores web compartidos, sin embargo, ligeramente diferentes de los trabajadores web dedicados (usando una comunicación de puerto implícito) es que la comunicación se realiza explícitamente utilizando un objeto de puerto y adjuntando un controlador de eventos de mensajes.
Después de recibir el primer mensaje del script del trabajador web, el trabajador web compartido adjunta un controlador de eventos al puerto activado. En general, el controlador ejecutará su propio método PostMessage () para devolver un mensaje al código de llamada, y luego el método Start () del puerto genera un proceso de mensaje válido.
Mire el único ejemplo que puede encontrar en Internet: cree un hilo compartido para recibir instrucciones enviadas desde diferentes conexiones y luego implementar su propia lógica de procesamiento de instrucciones. Una vez completado el procesamiento de instrucciones, el resultado se devolverá a cada usuario conectado diferente.
Código HTML:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> Ejemplo de trabajador compartido: Cómo usar trabajador compartido en HTML5 </title>
<script>
var trabajador = nuevo SharedWorker ('SharedWorker.js');
var log = document.getElementById ('respuesta_from_worker');
trabajador.port.addeventListener ('Mensaje', function (e) {
// Registre los datos de respuesta en la página web
log.TextContent = E.Data;
}, FALSO);
trabajador.port.start ();
trabajador.port.postMessage ('Ping de la página web del usuario ..');
// El siguiente método enviará la entrada del usuario a SharedWorker
Función PostMessageToSharedWorker (Entrada)
{
// Defina un objeto JSON para construir la solicitud
instrucciones var = {instrucción: input.Value};
trabajador.port.postMessage (instrucciones);
}
</script>
</ablo>
<Body Onload = ''>>
<Output ID = 'Response_from_worker'>
Ejemplo de trabajador compartido: cómo usar trabajador compartido en HTML5
</utenal>
Enviar instrucciones al trabajador compartido:
<input type = "text" AutOfocus onInput = "PostMessageToShedWorker (this); return false;">
</input>
</body>
</html>
Código de archivo de script:
// Cree un hilo compartido para recibir instrucciones enviadas desde diferentes conexiones. Una vez completado el procesamiento de instrucciones, el resultado se devolverá a cada usuario conectado diferente.
var conection_number = 0;
onconnect = function (e) {
Connect_number = Connect_Number+ 1;
// consigue el primer puerto aquí
VAR Port = E.Ports [0];
Port.PostMessage ('¡Una nueva conexión! El número de conexión actual es'
+ Connect_Number);
Port.onmessage = function (e) {
// Obtener instrucciones del solicitante
instrucción var = e.data.instruction;
VAR Results = Execute_instruction (instrucción);
Port.PostMessage ('Solicitud:'+Instrucción+'Respuesta'+Resultados
+'del trabajador compartido ...');
};
};
/*
* Esta función se utilizará para ejecutar las instrucciones enviadas desde el solicitante
* @Param Instrucción
* @devolver
*/
función execute_instruction (instrucción)
{
var result_value;
// Implementar su lógica aquí
// ejecutar la instrucción ...
return result_value;
}
En el ejemplo de subproceso compartido anterior, se construye un objeto de subproceso compartido en la página principal, es decir, cada página de conexión de usuario y un método se define para enviar las instrucciones de usuario entrantes al hilo compartido. Al mismo tiempo, Connect_Number se define en el fragmento del código de implementación del hilo compartido para registrar el número total de conectado al hilo compartido. Después de eso, use el procesador de eventos OnConnect para aceptar conexiones de diferentes usuarios y analizar las instrucciones que pasan. Finalmente, se define un método Execute_Instruction para ejecutar las instrucciones del usuario. Después de completar la ejecución de la instrucción, el resultado se devolverá a cada usuario.
Aquí no usamos el controlador de eventos OnMessage del hilo de trabajadores como el ejemplo anterior, pero utilizamos otro método para AddEventListener. De hecho, como se mencionó anteriormente, los principios de implementación de estos dos son básicamente los mismos, pero aquí hay algunas ligeras diferencias. Si usa AddEventListener para aceptar mensajes de hilos compartidos, primero debe usar el método Worker.Port.Start () para iniciar este puerto. Después de eso, puede recibir y enviar mensajes normalmente como la forma en que se usa un hilo de trabajador.
Declaración final Cosas que puedes hacer en un hilo :1. Puede usar setTimeOut (), ClearTimeOut (), setInterval (), ClearInterval () y otras funciones.
2. Puede usar objetos navegadores.
3. Puede usar xmlhttprequest para enviar solicitudes.
4. Puede usar el almacenamiento web en el hilo.
5. Puedes usar yo para obtener el alcance de este hilo en el hilo.
Cosas que no se pueden hacer en hilos :1. Los objetos DOM/BOM que no sean Navigator no se pueden usar en subprocesos, como la ventana y el documento (si desea operar, solo puede enviar mensajes al creador de trabajadores y operar a través de funciones de devolución de llamada).
2. Variables y funciones en el hilo principal no se pueden usar en el hilo.
3. Los comandos de operación con efectos de suspensión no se pueden usar en hilos, como alerta, etc.
4. JS no se puede cargar a través de dominios en hilos.
Los hilos también requieren consumo de recursos, y el uso de hilos también traerá cierta complejidad, por lo que si no hay una razón suficiente para usar hilos adicionales, no los use.
Referencia prácticaDocumento oficial: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
Descripción de la clasificación del trabajo web: http://www.w3schools.com/html5/html5_webworkers.asp
Preocupaciones de la plantilla: http://www.cuoxin.com/w3school/html5/
Descripción general del trabajo web: https://developer.mozilla.org/en/using_web_workers