Web Worker es una solución de subprocesos múltiples de JavaScript proporcionada por HTML5. Podemos entregar algún código computacionalmente intensivo al trabajador web para que lo ejecute sin congelar la interfaz de usuario.
1: Cómo utilizar el trabajadorEl principio básico de Web Worker es utilizar la clase Worker para cargar un archivo JavaScript en el hilo principal actual de JavaScript para abrir un nuevo hilo, lo que tiene el efecto de ejecución sin bloqueo y proporciona una interfaz para el intercambio de datos entre el hilo principal. y el nuevo hilo: postMessage, onmessage.
Entonces, cómo usarlo, veamos un ejemplo:
//worker.jsonmessage =function (evt){ var d = evt.data;//Obtener los datos enviados a través de evt.data postMessage(d);//Enviar los datos obtenidos al hilo principal}Página HTML: prueba.html
<!DOCTYPE HTML><html><head> <meta http-equiv=Content-Type content=text/html; charset=utf-8/> <script type=text/javascript>//Hilo principal de la página WEB var trabajador = new Worker(worker.js); //Crea un objeto Worker y le pasa la URL del script que se ejecutará en el nuevo hilo work.postMessage(hello world); //Envía datos al trabajador work.onmessage); =function(evt){ //Recibir la función de datos console.log(evt.data) del trabajador; //Enviar los datos enviados por el trabajador} </script> </head> <body></body>< /html>Después de abrir test.html con el navegador Chrome, la consola muestra hola mundo, lo que indica que el programa se ejecutó correctamente.
En este ejemplo podemos ver que el uso de trabajadores web se divide principalmente en las siguientes partes:
Hilo principal de la WEB:
1. Cargue un archivo JS a través de trabajador = nuevo trabajador (url) para crear un trabajador y devolver una instancia de trabajador.
2. Envíe datos al trabajador a través del método trabajador.postMessage (datos).
3. Vincule el método trabajador.onmessage para recibir los datos enviados por el trabajador.
4. Puede utilizar work.terminate() para finalizar la ejecución de un trabajador.
nuevo hilo de trabajo:
1. Envíe datos al hilo principal a través del método postMessage (datos).
2. Vincule el método onmessage para recibir los datos enviados por el hilo principal.
2: ¿Qué puede hacer el trabajador?Ahora que sabemos cómo utilizar Web Worker, para qué sirve y qué problemas puede ayudarnos a resolver. Veamos un ejemplo de la secuencia de Fibonacci.
Como todos sabemos, en matemáticas, la secuencia de Fibonacci se define recursivamente: F0=0, F1=1, Fn=F(n-1)+F(n-2) (n>=2, n∈N*), La implementación común de javascript es:
var fibonacci =función(n) { return n <2? n : argumentos.callee(n -1) + argumentos.callee(n -2);};//fibonacci(36)El tiempo de ejecución de este método para calcular la secuencia de Fibonacci de 39 en Chrome es de 19097 milisegundos, pero cuando se trata de calcular 40, el navegador indica directamente que el script está ocupado.
Dado que JavaScript se ejecuta en un solo subproceso, el navegador no puede ejecutar otros scripts de JavaScript durante el proceso de cálculo de la secuencia, y el subproceso de representación de la interfaz de usuario también se suspenderá, lo que provocará que el navegador entre en un estado zombi. Usar un trabajador web para poner el proceso de cálculo de la secuencia en un nuevo hilo evitará esta situación. Ver ejemplos específicos:
//fibonacci.jsvar fibonacci =función(n) { return n <2? n : argumentos.callee(n -1) + argumentos.callee(n -2);};onmessage =función(evento) { var n = parseInt (evento.datos, 10); postMensaje(fibonacci(n));};Página HTML: fibonacci.html
<!DOCTYPE HTML><html><head><meta http-equiv=Content-Type content=text/html; charset=utf-8/><title>trabajador web fibonacci</title><script type=text/javascript > onload =función(){ var trabajador =nuevo Trabajador('fibonacci.js'); trabajador.addEventListener('mensaje', función(evento) { var timer2 = (nuevo Fecha()).valueOf(); console.log( 'Resultado:'+event.data, 'Tiempo:'+ temporizador2, 'Tiempo tomado:'+ (temporizador2 - temporizador) }, var temporizador =); ( new Date()).valueOf(); console.log('Iniciar cálculo: 40', 'Hora:' + setTimeout(function(){); console.log('La función del temporizador se ejecutó al calcular la secuencia', 'Hora:'+ (new Date()).valueOf() },1000); Ejecuté ', 'time:'+ (new Date()).valueOf() } </script></head><body></body></html> al calcular la secuencia.Abra fibonacci.html en Chrome y la consola obtendrá el siguiente resultado:
Empezar a contar: 40 Hora: 1316508212705
Cuando calculé la secuencia, ejecuté el tiempo: 1316508212734
La función del temporizador ejecutada al calcular la secuencia: 1316508213735
Resultado: 102334155 Tiempo: 1316508262820 Tiempo transcurrido: 50115
Este ejemplo muestra que el cálculo de la secuencia de Fibonacci realizado en el trabajador no afecta la ejecución del código del hilo principal. Se calcula completamente en su propio hilo independiente y los resultados solo se envían al hilo principal después del cálculo. terminado.
Con los trabajadores web, podemos realizar algunas operaciones complejas y a gran escala en el front-end sin afectar la visualización de la página, y el repugnante mensaje de script ocupado no aparecerá.
El siguiente ejemplo utiliza un trabajador web para calcular los píxeles en la escena. Cuando se abre la escena, se dibuja uno por uno. Un trabajador solo calcula un valor de píxel.
Tres: Otros intentos del TrabajadorYa sabemos que Worker crea un trabajador al recibir una URL, entonces, ¿podemos usar trabajadores web para realizar algunas solicitudes similares a jsonp? Como todos sabemos, jsonp carga datos json insertando etiquetas de script y el elemento de script se carga y ejecuta. Todo el proceso está bloqueando. Sería fantástico si se pudieran utilizar trabajadores web para implementar la carga asincrónica.
El siguiente ejemplo cargará datos JSON de 169,42 KB a través de tres métodos diferentes: web trabajador, jsonp y ajax.
// /aj/webWorker/core.jsfunction $E(id) { return document.getElementById(id);}onload =function() { //Cargar a través del trabajador web $E('workerLoad').onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face2'; var d = (nueva fecha()).valueOf(); Trabajador(url); trabajador.onmessage =function(obj) { console.log('trabajador web: '+ ((nueva fecha()).valueOf() - d)); //Cargar a través de jsonp$ E('jsonpLoad').onclick =función() { var url ='http://js.wcdn.cn/aj/mblog/face1'; Fecha()).valueOf(); STK.core.io.scriptLoader({ método:'publicación', url: url, onComplete: función() { console.log('jsonp: '+ ((nueva fecha()) .valueOf() - d)); } }); //Cargar $E('ajaxLoad') a través de ajax.onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face'; var d = (nueva fecha()).valueOf(); STK.core.io.ajax({ url: url, onComplete: función( json) { console.log('ajax: '+ ((nueva fecha()).valueOf() - d));Página HTML:/aj/webWorker/worker.html
<!DOCTYPE HTML><html><head><meta http-equiv=Content-Type content=text/html; charset=utf-8/><title>Ejemplo de trabajador: cargar datos</title><script src=http ://js.t.sinajs.cn/STK/js/gaea.1.14.js type=text/javascript></script><script type=text/javascript src=http://js.wcdn.cn/aj/webWorker/core.js></script></head><body> <tipo de entrada=id de botón=workerLoad value=carga de trabajador web></input> < tipo de entrada=id del botón=jsonpValor de carga=carga jsonp></input> <tipo de entrada=id del botón=ajaxValor de carga=carga ajax></input></body></html>
Configurar HOST
127.0.0.1 js.wcdn.cn
Acceda a la página a través de http://js.wcdn.cn/aj/webWorker/worker.html y luego cargue los datos de tres maneras para obtener la salida de la consola:
trabajador web: 174jsonp: 25ajax: 38
Después de intentarlo varias veces, descubrí que la diferencia de tiempo entre cargar datos a través de jsonp y ajax no es muy diferente, y el tiempo de carga del trabajador web siempre es alto, por lo que usar el trabajador web para cargar datos sigue siendo relativamente lento, incluso en el caso de un gran volumen de datos, no hay ninguna ventaja, puede ser que al trabajador le lleve tiempo inicializar nuevos subprocesos. No hay otra ventaja que la de no bloquearse durante la carga.
Entonces, ¿puede el trabajador web admitir la carga de js entre dominios? Esta vez accedemos a la página a través de http://127.0.0.1/aj/webWorker/worker.html. Al hacer clic en el botón de carga del trabajador web, no se refleja nada en Chrome. Aparece el siguiente mensaje de error. De esto podemos saber que el trabajador web no admite la carga de JS entre dominios, lo cual es una mala noticia para los sitios web que implementan archivos estáticos en un servidor estático separado.
Por lo tanto, los trabajadores web solo se pueden usar para cargar datos json en el mismo dominio, y ajax ya puede hacerlo, y es más eficiente y versátil. Dejemos que el Trabajador haga aquello en lo que es bueno.
Cuatro: resumenLos trabajadores web se ven geniales, pero son diabólicos.
Qué podemos hacer:
1. Puede cargar un JS para realizar una gran cantidad de cálculos complejos sin bloquear el proceso principal y comunicarse a través de postMessage y onmessage.
2. Puede cargar archivos de script adicionales en el trabajador a través de importScripts(url)
3. Puede utilizar setTimeout(), clearTimeout(), setInterval() y clearInterval().
4. Puede utilizar XMLHttpRequest para enviar solicitudes.
5. Puede acceder a algunas propiedades del navegador.
¿Cuáles son las limitaciones?
1.No se puede cargar JS entre dominios
2. El código dentro del trabajador no puede acceder al DOM.
3. Varios navegadores tienen diferentes implementaciones de Worker. Por ejemplo, FF permite la creación de nuevos trabajadores en los trabajadores, pero Chrome no.
4. No todos los navegadores admiten esta nueva función.
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.