Cuando se trata de HTML5, la gente siempre habla de ello. Hay tantas funciones y API interesantes que son refrescantes. Sin embargo, muchos zapatos para niños todavía se quedan en la etapa semántica e ignoran el poder de HTML5.
En esta sección analizaremos Web-Worker multiproceso.
1. Deje en claro que JavaScript es de un solo subproceso.Una característica importante del lenguaje JavaScript es que tiene un solo subproceso, lo que significa que solo puede hacer una cosa a la vez.
Suena raro, ¿por qué no diseñarlo con subprocesos múltiples para mejorar la eficiencia? Podemos asumir un escenario:
Supongamos que JavaScript tiene dos subprocesos al mismo tiempo. Un subproceso agrega contenido a un determinado nodo DOM y el otro subproceso elimina el nodo. En este caso, ¿qué subproceso debería usar el navegador?
Como lenguaje de programación del navegador, el objetivo principal de JavaScript es interactuar con los usuarios y manipular DOM .
Esto determina que solo puede ser de un solo subproceso; de lo contrario, causará problemas de sincronización muy complejos. Para evitar la complejidad, JavaScript ha sido de un solo subproceso desde su nacimiento. Esto se ha convertido en una característica central del lenguaje y se espera que sea difícil de cambiar en el corto plazo.
El subproceso único siempre ha sido un problema. Para aprovechar la potencia informática de CPU de múltiples núcleos, HTML5 propone el estándar Web Worker , que permite que los scripts JavaScript creen múltiples subprocesos. Sin embargo, el hilo secundario está completamente controlado por el hilo principal y no debe operar DOM .
Por lo tanto, este nuevo estándar no cambia la naturaleza de un solo subproceso de JavaScript .
Web Workers es una solución multiproceso JavaScript proporcionada por los navegadores modernos. Podemos encontrar muchos escenarios de uso:
1. Podemos utilizar Web Worker para realizar algunas operaciones computacionales intensivas;
2. Se pueden implementar encuestas y se pueden cambiar ciertos estados;
3. Actualización del estado del mensaje de encabezado, como notificación de la cantidad de mensajes en el encabezado de la página;
4. Interacción del usuario de alta frecuencia, revisión ortográfica, por ejemplo: ayudar a los usuarios a completar la corrección de errores de entrada y las funciones de corrección basadas en los hábitos de entrada del usuario, registros históricos, caché y otra información.
5. Cifrado: el cifrado a veces puede llevar mucho tiempo, especialmente si necesita cifrar una gran cantidad de datos con frecuencia (por ejemplo, cifrar datos antes de enviarlos al servidor).
6. Captura previa de datos: para optimizar su sitio web o aplicación web y mejorar el tiempo de carga de datos, puede utilizar Workers
para cargar algunos datos por adelantado en caso de que los necesite.
El cifrado es un gran escenario para usar Web Worker porque no requiere acceso DOM ni a otra magia, simplemente utiliza algoritmos para realizar cálculos. A medida que el público presta cada vez más atención a los datos personales confidenciales, la seguridad de la información y el cifrado se han convertido en máximas prioridades. Esto se puede reflejar en el reciente incidente de fuga de datos de usuario 12306.
Una vez que el cálculo se realiza en Worker, es transparente para el usuario y no afecta su experiencia.
3. Compatibilidad 4. Conceptos básicos1. Primero recuerde juzgar si es compatible.
si (ventana.Trabajador) {...} 2. Crear un nuevo worker es fácil
const miTrabajador = nuevo Trabajador('trabajador.js');El método postMessage() y el controlador de eventos onmessage son la magia negra de Workers.
3. postMessage se usa para enviar mensajes y onmessage se usa para escuchar mensajes.
const trabajador = new Worker('src/worker.js');worker.onmessage = e => { console.log(e.data);};worker.postMessage('¡Cómo estás!'); Cuando se usan en el hilo principal, onmessage y postMessage() deben colgarse en el objeto worker , pero esto no es necesario cuando se usan en worker . La razón es que, dentro de worker , worker es efectivamente el alcance global.
4. Manejo de excepciones:
trabajador.onerror = function(error) { console.log(error.message); throw error;}; 5. Despedir worker
trabajador.terminar();
El hilo worker muere inmediatamente, sin ninguna posibilidad de que complete sus operaciones o se limpie.
6. En el hilo worker , workers también pueden llamar a su propio método close para cerrar:
cerca();5. Inicio rápido
Para comprenderlo rápidamente, hagamos un pequeño ejemplo: la estructura del proyecto es la siguiente
├── index.html└── src ├── main.js └── trabajador.js
HTML
<html><head> <title>Demostración de trabajo web</title> <meta charset=UTF-8 /></head><body> <div id=app> ¡Hola Jartto </div> <script src=src! /main.js></script></body></html>
principal.js
trabajador const = nuevo trabajador('src/worker.js');trabajador.onmessage = e => { mensaje const = e.data; console.log(`[De trabajador]: ${mensaje}`); ('app').innerHTML = mensaje;};worker.postMessage('¡Bien escrito!');Trabajo.js
onmessage = e => { const mensaje = e.data; console.log(`[De principal]: ${mensaje}`); if(message.indexOf('Bueno') > -1) { postMessage('Gracias por su apoyo '); }};El código es muy simple. El hilo principal envía: "¡Está muy bien escrito!"
El trabajador web recibió el mensaje y descubrió que el contenido contenía la palabra "bueno" y lo envió de regreso al hilo principal: "Gracias por su apoyo".
6. Limitaciones 1. Dentro worker , los nodos DOM no se pueden manipular directamente y no se pueden utilizar los métodos y propiedades predeterminados del objeto window . Sin embargo, podemos usar una gran cantidad de cosas debajo del objeto window , incluidos mecanismos de almacenamiento de datos como WebSockets , IndexedDB y Data Store API específica FireFox OS .
Aquí hay un ejemplo, modificamos main.js :
trabajador const = nuevo trabajador('src/worker.js');trabajador.onmessage = e => { mensaje const = e.data; console.log(`[De trabajador]: ${mensaje}`); ('aplicación').innerHTML = mensaje;};+ trabajador.onerror = función(error) {+ consola.log(error);+ trabajador.terminar();+ };worker.postMessage('¡Bien escrito!'); Modifiquemos work.js nuevamente
+ alert('jartto');onmessage = e => { const message = e.data; console.log(`[De principal]: ${mensaje}`); if(message.indexOf('good') > - 1) { postMessage('Gracias por su apoyo' }});En este momento, la ejecución informará:
Esto se debe a que: el contexto en el que se ejecuta worker.js es diferente del contexto en el que se ejecuta HTML de la página principal. El objeto de nivel superior no es Window , el contexto global para la ejecución woker.js , sino WorkerGlobalScope . Expliquemos en detalle.
2. La transferencia de datos entre workers y el hilo principal se lleva a cabo a través de dicho mecanismo de mensajes: ambas partes usan el método postMessage() para enviar sus propios mensajes y usan el controlador de eventos onmessage para responder al mensaje (el mensaje está incluido en el atributo data del evento Message ).
En este proceso, los datos no se comparten sino que se copian.
3. Restricción por el mismo origen
El archivo de script asignado al hilo Worker debe tener el mismo origen que el archivo de script del hilo principal.
4. Restricciones de archivos
El hilo Worker no puede leer archivos locales, es decir, no puede abrir el sistema de archivos local （file://） . El script que carga debe provenir del servidor.
5. Archivos locales no permitidos
Error de seguridad no detectado: no se pudo crear un trabajador:
script en '(ruta)/worker.js'
No se puede acceder desde el origen 'nulo'.
Chrome no le permite cargar trabajadores web cuando ejecuta scripts desde un archivo local.
Entonces, ¿cómo solucionarlo? Podemos iniciar un servidor local. Se recomienda utilizar http-server , que es simple y fácil de usar.
6. Política de seguridad de contenidos
worker tiene su propio contexto de ejecución, distinto del objeto document que lo creó. En términos generales, worker no está restringido por la política de seguridad de contenido document (o worker principal) que lo creó.
Tomemos un ejemplo, suponiendo que un document tiene la siguiente declaración de encabezado:
Política de seguridad de contenido: script-src 'self'
Parte del propósito de esta declaración es prohibir que el código de script contenido en ella utilice el método eval() . Sin embargo, si el código del script crea un worker , el código que se ejecuta en el contexto del worker puede usar eval() .
Para especificar un CSP para un trabajador, la solicitud para enviar el código de trabajador debe ir acompañada de un CSP.
La única excepción es que si el origen del script worker es un identificador único global (por ejemplo, su URL especifica un esquema de datos o blob ), worker heredará document o CSP worker que lo creó.
Al respecto, podemos encontrar la documentación en MDN :
1. self :
Podemos usar la propiedad self de WorkerGlobalScope para obtener una referencia al objeto mismo.
2. location :
El atributo location devuelve WorkerLocation asociado con el hilo cuando se creó. Representa la URL absoluta del recurso de secuencia de comandos utilizado para inicializar el hilo de trabajo. Esta ubicación del recurso URL no cambiará incluso si la página se redirige varias veces.
3. close :
Cierra el hilo actual, similar a terminate .
4. caches :
El contexto actual tiene CacheStorage para garantizar la disponibilidad sin conexión y la respuesta a la solicitud se puede personalizar.
5. console :
Admite sintaxis console .
6. importScripts
Podemos cargar funciones de biblioteca en worker a través url mediante importScripts() .
7. XMLHttpRequest
Con él se pueden realizar solicitudes Ajax .
8. Puedes utilizar:
Hay muchas API que se pueden utilizar, por lo que no daré ejemplos uno por uno aquí.
Cuando worker encuentra un error de ejecución, se llamará a su controlador de eventos onerror . Recibirá un evento llamado error que amplía la interfaz ErrorEvent . El evento no se expande y puede cancelarse.
Para evitar que se active la acción predeterminada, el trabajador puede llamar al método preventDefault() del evento de error.
Normalmente utilizamos los siguientes tres datos clave para eventos de error:
trabajador.onerror = function(error) { console.log(error.message); throw error;};Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.