Comentario: Web Workers es una nueva tecnología agregada en HTML5 para implementar el procesamiento de backend en aplicaciones web.
Web Workers es una nueva tecnología agregada en HTML5 para implementar el procesamiento de antecedentes en aplicaciones web.
En HTML4, los programas creados por JS son todos un solo hilo. Si lleva mucho tiempo, la interfaz web no responderá por mucho tiempo. En el peor de los casos, aparecerá un cuadro de indicación de script:
Involucra que el script se ejecuta durante demasiado tiempo, ya sea para continuar. . . . Entonces se presenta el protagonista de este artículo: API de trabajadores web
El uso de esta API, los usuarios pueden crear fácilmente hilos que se ejecutan en segundo plano, y es muy simple crear programas de fondo:
var trabajador = nuevo trabajador ('*. js');
Nota: Los hilos de fondo no pueden acceder a páginas o objetos de ventana.
Los datos se pueden pasar con hilos de fondo enviando mensajes y recibiendo mensajes:
trabajador.onmessage = function (e) {};
trabajador.postMessage = function (e) {};
Hablemos de sumar:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> </title>
<script type = "text/javaScript">
función calculación () {
var num = 10000000000;
var r = 0;
para (var i = 1; i <num; i ++) {
r += i;
}
alerta (r);
}
calcular();
</script>
</ablo>
<Body>
</body>
</html>
Entonces se dio mi hermoso marco. . . Pero usar trabajadores web no:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> </title>
<script type = "text/javaScript">
var trabajador = nuevo trabajador ('c.js');
trabajador.onmessage = function (e) {
alerta ('y:' + e.data);
};
función calculación () {
var num = 1000000;
trabajador.postMessage (num);
}
calcular();
</script>
</ablo>
<Body>
</body>
</html>
onMessage = function (e) {
var num = e.data;
var r = 0;
para (var i = 1; i <num; i ++) {
r += i;
}
Postmessage (R);
}
A veces pienso, ¿por qué calculo un número tan grande si no tengo nada que hacer? . . . . Por supuesto, este es un truco aburrido, pero creo que hay un escenario que puede requerir esto.
Cuando estaba aprendiendo la API del archivo antes, había una operación para leer archivos locales. Si el archivo es demasiado grande, será muy lento. Me pregunto si esto se puede aplicar. Es necesario probarlo durante el segundo estudio.
Interactuar datos con hilos
Completamos una función aquí, generamos aleatoriamente una matriz en primer plano y luego volvemos al primer plano para imprimir en segundo plano si el cálculo puede ser 3 de 3:
Programa principal
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> </title>
<estilo>
durar
{
relleno: 10px;
}
</style>
<script src = "../ jQuery-1.7.1.js" type = "text/javascript"> </script>
<script type = "text/javaScript">
$ (documento) .Ready (function () {
var trabajador = nuevo trabajador ('t1.js');
trabajador.postMessage ('');
trabajador.onmessage = function (e) {
var arr = e.data.split (';');
para (var i = 0, len = arr.length; i <len; i ++) {
var dom = $ ('<span>' + arr [i] + '</span>');
$ ('##cuerpo'). append (dom);
}
}
});
</script>
</ablo>
<Body>
<div>
</div>
</body>
</html>
El programa que genera una matriz
onMessage = function (e) {
var arr = [];
para (var i = 0; i <100; i ++) {
arr.push (parseInt (math.random () * 100));
}
var trabajador = nuevo trabajador ('t2.js');
trabajador.postMessage (json.stringify (arr));
trabajador.onmessage = function (e) {
// Enviar los resultados de la selección de nuevo a la recepción
Postmessage (e.data);
};
}
Determinar si todos los datos en la matriz están divididos por 3
onMessage = function (e) {
var arrr = json.parse (e.data);
var str = '';
para (var i = 0, len = arr.length; i <len; i ++) {
if (parseInt (arr [i]) % 3 == 0) {
if (str! = '') str += ';';
str += arr [i];
}
}
Postmessage (STR);
cerca();
};
Descripción de la lógica del programa:
Una anidación de hilos se usa aquí
Primero, ejecute el programa de primer plano, donde se inicializa un hilo infantil T1 para inicializar 100 matrices.
Luego, el hilo infantil T1 inicializa el hilo infantil T2 (utilizado para atravesar la matriz, eliminar números que pueden ser divisibles por 3 y formar una cadena), y T1 pasa los datos de la matriz a T2
T2 recibe datos T1, y después del cálculo, transferirá la cadena a T1, T1 a la recepción, y la recepción ejecutará su propia lógica
Termina el proceso
Conclusión
En pocas palabras, estoy declarando el hilo infantil aquí, luego enviando datos al postmessaje infantil y luego estoy esperando el resultado.
Parece que combinado con los últimos enchufes web de la API de comunicación, dos se pueden combinar en un programa de chat web, e incluso se pueden usar algunas bases de datos locales de almacenamiento/locales.
Esto puede ser algo bueno.