Web Worker é uma solução javascript multithreading fornecida pelo HTML5. Podemos entregar algum código computacionalmente intensivo para o web trabalhador ser executado sem congelar a interface do usuário.
1: Como usar o TrabalhadorO princípio básico do Web Worker é usar a classe Worker para carregar um arquivo JavaScript no thread principal atual do JavaScript para abrir um novo thread, que tem o efeito de execução sem bloqueio e fornece uma interface para troca de dados entre o thread principal e o novo tópico: postMessage, onmessage.
Então, como usá-lo, vejamos um exemplo:
//worker.jsonmessage =function (evt){ var d = evt.data;//Obtém os dados enviados por meio de evt.data postMessage(d);//Envia os dados obtidos para o thread principal}Página HTML: teste.html
<!DOCTYPE HTML><html><head> <meta http-equiv=Content-Type content=text/html; charset=utf-8/> <script type=text/javascript>//thread principal da página WEB var trabalhador = new Worker(worker.js); //Cria um objeto Worker e passa para ele a URL do script que será executado na nova thread trabalhador.postMessage(hello world); =function(evt){ //Recebe a função de dados console.log(evt.data) do trabalhador; //Exibe os dados enviados do trabalhador} </script> </head> <body></body>< /html>Depois de abrir test.html com o navegador Chrome, o console exibe hello world, indicando que o programa foi executado com sucesso.
A partir deste exemplo, podemos ver que o uso de web workers é dividido principalmente nas seguintes partes:
Tópico principal da WEB:
1. Carregue um arquivo JS por meio de worker = new Worker( url ) para criar um trabalhador e retornar uma instância de trabalhador.
2. Envie dados ao trabalhador por meio do método trabalhador.postMessage(data).
3. Vincule o método trabalhador.onmessage para receber os dados enviados pelo trabalhador.
4. Você pode usar trabalhador.terminate() para encerrar a execução de um trabalhador.
novo thread de trabalho:
1. Envie dados para o thread principal por meio do método postMessage(data).
2. Vincule o método onmessage para receber os dados enviados pelo thread principal.
2: O que o trabalhador pode fazer?Agora que sabemos como usar o web trabalhador, para que serve e quais problemas ele pode nos ajudar a resolver. Vejamos um exemplo da sequência de Fibonacci.
Como todos sabemos, em matemática, a sequência de Fibonacci é definida recursivamente: F0=0, F1=1, Fn=F(n-1)+F(n-2) (n>=2, n∈N*), A implementação comum de javascript é:
var fibonacci =função(n) { return n <2 n : argumentos.callee(n -1) + argumentos.callee(n -2);};//fibonacci(36)O tempo de execução desse método para calcular a sequência de Fibonacci de 39 no Chrome é de 19.097 milissegundos, mas quando se trata de calcular 40, o navegador avisa diretamente que o script está ocupado.
Como o JavaScript é executado em um único thread, o navegador não pode executar outros scripts JavaScript durante o processo de cálculo da sequência, e o thread de renderização da IU também será suspenso, fazendo com que o navegador entre em um estado zumbi. Usar um web trabalhador para colocar o processo de cálculo da sequência em um novo thread evitará essa situação. Veja exemplos específicos:
//fibonacci.jsvar fibonacci =função(n) { return n <2? n : argumentos.callee(n -1) + argumentos.callee(n -2);};onmessage =função(evento) { var n = parseInt (evento.dados, 10); postMessage(fibonacci(n));};Página HTML: fibonacci.html
<!DOCTYPE HTML><html><head><meta http-equiv=Content-Type content=text/html; charset=utf-8/><title>web trabalhador fibonacci</title><script type=text/javascript > onload =function(){ var trabalhador =new Worker('fibonacci.js'); trabalhador.addEventListener('message', function(event) { var timer2 = (new Date()).valueOf(); console.log( 'Resultado:'+event.data, 'Hora:'+ timer2, 'Tempo gasto:'+ (timer2 - timer) }, var timer =); ( new Date()).valueOf(); console.log('Iniciar cálculo: 40', 'Hora:' + timer ); console.log('A função de cronômetro foi executada ao calcular a sequência', 'Time:'+ (new Date()).valueOf() },1000); Executei ', 'time:'+ (new Date()).valueOf() } </script></head><body></body></html> ao calcular a sequênciaAbra fibonacci.html no Chrome e o console obterá a seguinte saída:
Iniciar contagem: 40 Tempo: 1316508212705
Quando calculei a sequência, executei o tempo: 1316508212734
A função de temporizador executada ao calcular a sequência: 1316508213735
Resultado: 102334155 Tempo: 1316508262820 Tempo decorrido: 50115
Este exemplo mostra que o cálculo da sequência de Fibonacci realizado no trabalhador não afeta a execução do código do thread principal. Ele é totalmente calculado em seu próprio thread independente, e os resultados só são enviados de volta ao thread principal após o cálculo ser realizado. concluído.
Usando web workers, podemos realizar algumas operações complexas e em grande escala no front-end sem afetar a exibição da página, e o nojento prompt de script ocupado não aparecerá.
O exemplo a seguir usa um web trabalhador para calcular pixels na cena. Quando a cena é aberta, ela é desenhada um por um. Um trabalhador calcula apenas um valor de pixel.
Três: Outras tentativas do TrabalhadorJá sabemos que Worker cria um trabalhador recebendo uma URL, então podemos usar web workers para fazer algumas solicitações semelhantes ao jsonp. Como todos sabemos, jsonp carrega dados json inserindo tags de script, e o elemento script está carregando e executando o? o processo é todo bloqueador. Seria ótimo se web workers pudessem ser usados para implementar o carregamento assíncrono.
O exemplo a seguir carregará dados JSON de 169,42 KB por meio de três métodos diferentes: web trabalhador, jsonp e ajax.
// /aj/webWorker/core.jsfunction $E(id) { return document.getElementById(id);}onload =function() { //Carregar através do web trabalhador $E('workerLoad').onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face2'; Worker(url); trabalhador.onmessage =function(obj) { console.log('web trabalhador: '+ ((new Date()).valueOf() - d)); E('jsonpLoad').onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face1'; Date()).valueOf(); STK.core.io.scriptLoader({método:'post', url: url, onComplete: function() { console.log('jsonp: '+ ((nova data()) .valueOf() - d)); //Carregar $E('ajaxLoad') através de ajax.onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face'; var d = (new Date()).valueOf(); json) { console.log('ajax: '+ ((new Date()).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>Exemplo de trabalho: carregar dados</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> <input type=button id=workerLoad value=carga do trabalhador da web></input> < input type=button id=jsonpLoad value=jsonp load></input> <input type=button id=ajaxLoad value=ajax load></input></body></html>
Configurar HOST
127.0.0.1 js.wcdn.cn
Acesse a página através de http://js.wcdn.cn/aj/webWorker/worker.html e carregue os dados de três maneiras para obter a saída do console:
trabalhador da web: 174jsonp: 25ajax: 38
Depois de tentar várias vezes, descobri que a diferença de tempo entre o carregamento de dados por meio de jsonp e ajax não é muito diferente, e o tempo de carregamento do web trabalhador é sempre de alto nível, portanto, usar o web trabalhador para carregar dados ainda é relativamente lento, mesmo no caso de grande volume de dados, não há vantagem, pode ser que demore para o Worker inicializar novos threads. Não há outra vantagem além de não bloquear durante o carregamento.
Então, o web trabalhador pode suportar o carregamento js entre domínios. Desta vez, acessamos a página por meio de http://127.0.0.1/aj/webWorker/worker.html. Ao clicar no botão de carregamento do web trabalhador, nada é refletido no Chrome. a seguinte mensagem de erro aparece. A partir disso, podemos saber que o web trabalhador não oferece suporte ao carregamento de JS entre domínios, o que é uma má notícia para sites que implantam arquivos estáticos em um servidor estático separado.
Portanto, web workers só podem ser usados para carregar dados json no mesmo domínio, e o ajax já pode fazer isso, e é mais eficiente e versátil. Deixe o Trabalhador fazer o que é bom.
Quatro: ResumoOs trabalhadores da Web parecem ótimos, mas são diabólicos.
O que podemos fazer:
1. Você pode carregar um JS para realizar um grande número de cálculos complexos sem interromper o processo principal e comunicar-se por meio de postMessage, onmessage
2. Você pode carregar arquivos de script adicionais no trabalhador por meio de importScripts(url)
3. Você pode usar setTimeout(), clearTimeout(), setInterval() e clearInterval()
4. Você pode usar XMLHttpRequest para enviar solicitações
5. Pode acessar algumas propriedades do navegador
Quais são as limitações:
1.Não é possível carregar JS entre domínios
2. O código dentro do trabalhador não pode acessar o DOM
3. Vários navegadores possuem implementações diferentes de Worker. Por exemplo, o FF permite a criação de novos trabalhadores em trabalhadores, mas o Chrome não.
4. Nem todo navegador oferece suporte a esse novo recurso
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.