Comentário: Web Workers é uma nova tecnologia adicionada no HTML5 para implementar o processamento de back -end em aplicativos da Web.
Web Workers é uma nova tecnologia adicionada no HTML5 para implementar o processamento em segundo plano em aplicativos da Web.
No HTML4, os programas criados pelo JS são todos threads. Se levar muito tempo, a interface da Web não responderá por um longo tempo. Na pior das hipóteses, uma caixa de prompt de script aparecerá:
Isso solicita que o script seja dado por muito tempo, seja continuado. . . . Portanto, o protagonista deste artigo é introduzido: API dos trabalhadores da web
O uso disso usuários da API pode criar facilmente threads em execução em segundo plano e é muito simples criar programas de fundo:
var trabalhador = novo trabalhador ('*. js');
NOTA: Os threads em segundo plano não podem acessar páginas ou objetos de janela.
Os dados podem ser passados com threads em segundo plano enviando mensagens e recebendo mensagens:
trabalhador.onMessage = function (e) {};
trabalhador.postMessage = function (e) {};
Vamos falar sobre soma:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> </title>
<script type = "text/javascript">
função calcular () {
var num = 10000000000;
var r = 0;
for (var i = 1; i <num; i ++) {
r += i;
}
alerta (r);
}
calcular();
</script>
</head>
<Body>
</body>
</html>
Então meu lindo quadro foi dado. . . Mas o uso de trabalhadores da web não:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> </title>
<script type = "text/javascript">
var trabalhador = novo trabalhador ('c.js');
trabalhador.onmessage = function (e) {
alerta ('e:' + e.data);
};
função calcular () {
var num = 1000000;
trabalhador.PostMessage (num);
}
calcular();
</script>
</head>
<Body>
</body>
</html>
onMessage = function (e) {
var num = e.data;
var r = 0;
for (var i = 1; i <num; i ++) {
r += i;
}
Postmessage (R);
}
Às vezes penso, por que calcular um número tão grande se não tenho nada para fazer. . . . . Claro que este é um truque chato, mas acho que há um cenário que pode exigir isso.
Quando eu estava aprendendo a API do arquivo anteriormente, havia uma operação para ler arquivos locais. Se o arquivo for muito grande, será muito lento. Gostaria de saber se isso pode ser aplicado? É necessário experimentá -lo durante o segundo estudo.
Interagir dados com threads
Concluímos uma função aqui, geramos aleatoriamente uma matriz em primeiro plano e depois retornamos ao primeiro plano para imprimir em segundo plano se o cálculo puder ser 3 em 3:
Programa principal
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> </title>
<estilo>
span
{
preenchimento: 10px;
}
</style>
<script src = "../ jQuery-1.7.1.js" type = "text/javascript"> </sCript>
<script type = "text/javascript">
$ (document) .ready (function () {
var trabalhador = novo trabalhador ('t1.js');
trabalhador.PostMessage ('');
trabalhador.onmessage = function (e) {
var arr = e.data.split (';');
for (var i = 0, len = arr.length; i <len; i ++) {
var dom = $ ('<span>' + arr [i] + '</span>');
$ ('#body'). Appender (DOM);
}
}
});
</script>
</head>
<Body>
<div>
</div>
</body>
</html>
O programa que gera uma matriz
onMessage = function (e) {
var arr = [];
for (var i = 0; i <100; i ++) {
Arr.push (parseint (math.random () * 100));
}
var trabalhador = novo trabalhador ('t2.js');
trabalhador.PostMessage (JSON.STRINGIFY (ARR));
trabalhador.onmessage = function (e) {
// Envie os resultados da seleção de volta à recepção
Postmessage (E.Data);
};
}
Determinar se todos os dados da matriz são divididos por 3
onMessage = function (e) {
var arr = json.parse (e.data);
var str = '';
for (var i = 0, len = arr.length; i <len; i ++) {
if (parseint (arr [i]) % 3 == 0) {
if (str! = '') str += ';';
str += arr [i];
}
}
Postmessage (STR);
fechar();
};
Descrição da lógica do programa:
Um aninhamento de fios é usado aqui
Primeiro, execute o programa de primeiro plano, onde um thread infantil T1 é inicializado para inicializar 100 matrizes.
Em seguida, o fio Child T1 inicializa o fio Child T2 (usado para atravessar a matriz, retirar números que podem ser divisíveis por 3 e formar uma string), e T1 passa os dados da matriz para T2
T2 recebe dados T1 e, após o cálculo, ele transferirá a string para T1, T1 para a recepção, e a recepção executará sua própria lógica
O processo termina
Conclusão
Simplificando, estou declarando o tópico infantil aqui e, em seguida, enviando dados para a pós -maquiagem infantil e, em seguida, aguardando o resultado.
Parece que combinado com os últimos soquetes da Web API de comunicação, dois podem ser combinados em um programa de bate -papo na web e até mesmo alguns bancos de dados de armazenamento/local local podem ser usados.
Isso pode ser uma coisa boa.