Antes do HTML5, o JavaScript é executado em navegadores trabalhados de uma maneira única. Embora houvesse muitas maneiras de implementar simulações multithread (como o método setInterval, o método setTimeout etc. em JavaScript), em essência, o programa executa ainda é realizado pelo mecanismo JavaScript de uma maneira única. Os threads do trabalhador introduzidos no HTML5 ativam o mecanismo JavaScript do lado do navegador para executar o código JavaScript simultaneamente, alcançando assim um bom suporte para programação multithreada do lado do navegador.
Multithreading em JavaScript - WebWorker Os trabalhadores da web no HTML5 podem ser divididos em dois tipos diferentes de threads, um é o trabalhador dedicado dedicado e o outro é o trabalhador compartilhado compartilhado. Os dois tipos de threads têm usos diferentes. Trabalhador especial da webUm trabalhador dedicado está conectado ao script que o criou. Pode se comunicar com outros trabalhadores ou componentes do navegador, mas não pode se comunicar com o DOM. O significado de dedicado é que este thread processa apenas um requisito por vez. Os threads dedicados são implementados em vários navegadores convencionais, exceto o IE e podem ser usados com confiança.
Crie threadCriar um trabalhador é simples, basta passar o nome do arquivo do arquivo JavaScript que precisa ser executado no thread para o construtor.
Comunicação de threadA comunicação entre o thread principal e o encadeamento infantil usa os métodos de pós -maquiagem e onMessage do objeto Thread. Não importa quem envia dados para quem, o envio e o envio usa o método PostMessage, e o receptor usa o método OnMessage para receber dados. O PostMessage possui apenas um parâmetro, ou seja, os dados passados e o OnMessage possui apenas um parâmetro. Suponha que seja o evento, os dados recebidos são obtidos através do Event.Data.
Envie dados JSONJSON é algo nativamente apoiado por JS. Não precisa ser usado para nada. Basta usar dados complexos no JSON. Por exemplo:
postMessage ({'cmd': 'init', 'timestamp': date.now ()});
Erros de manuseioQuando ocorre um erro em um thread, seu retorno de chamada de evento no OnError será chamado. Portanto, a maneira de lidar com erros é muito simples, que é montar o evento OnError da instância do thread. Esta função de retorno de chamada tem um erro de parâmetro, que possui 3 campos: mensagem - mensagem de erro; arquivo de arquivo - arquivo de script onde ocorreu o erro; LINHO - Linha onde ocorreu o erro.
Destruir tópicosDentro do fio, use o método de fechamento para se destruir. No segmento principal fora do encadeamento, o método de terminação da instância do thread é usado para destruir o thread.
A seguir, é apresentado um exemplo para ver a operação básica dos threads:
Código HTML:
<! Doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Web Web Works Fibonacci </title>
<script type = "text/javascript">
OnLoad = function () {
var trabalhador = novo trabalhador ('fibonacci.js');
trabalhador.onmessage = function (evento) {
console.log ("Resultado:" + event.data);
};
trabalhador.onerror = function (erro) {
console.log ("erro:" + error.message);
};
trabalhador.PostMessage (40);
}
</script>
</head>
<Body>
</body>
</html>
Arquivo de script Fibonacci.js Código:
//fibonacci.js
var fibonacci = function (n) {
retornar n <2? n: argumentos.callee (n - 1) + argumentos.callee (n - 2);
};
onMessage = function (evento) {
var n = parseint (event.data, 10);
pós -maquiagem (Fibonacci (n));
};
Coloque -os no mesmo diretório, execute o arquivo da página e visualize o console para ver os resultados da execução.
Há outro ponto aqui. No tópico principal, o evento OnMessage pode ser viciado de outra maneira:
trabalhador.addeventListener ('mensagem', função (evento) {
console.log ("Resultado:" + event.data);
}, false);
Pessoalmente, acho muito problemático, então por que não usar o OnMessage diretamente.
Use outros arquivos de scriptOs trabalhadores podem usar o método global importando-se para carregar e usar outros arquivos de script no domínio ou bibliotecas de classe. Por exemplo, a seguir são maneiras legais de usar:
ImportScripts ();/ * não importa nada */
Importscripts ('foo.js'); / * importa apenas "foo.js" */
Importscripts ('foo.js', 'bar.js');/ * importa dois scripts */
Após a importação, você pode usar diretamente os métodos nesses arquivos. Veja um pequeno exemplo online:
/**
* Use o método ImportScripts para introduzir scripts de recursos externos, aqui usamos a biblioteca da ferramenta de cálculo de fórmula matemática math_utilities.js
* Quando o mecanismo JavaScript carrega esse arquivo de recursos, continue executando o código a seguir. Ao mesmo tempo, o seguinte código pode ser acessado e chamado
* Variáveis e métodos definidos no arquivo de recursos.
**/
ImportScripts ('Math_utilities.js');
onMessage = function (evento)
{
var primeiro = event.data.first;
var segundo = event.data.second;
calcular (primeiro, segundo);
};
Função Calcule (primeiro, segundo) {
// Faça o trabalho de cálculo
var Common_Divisor = Divisor (primeiro, segundo);
var Common_multiple = múltiplo (primeiro, segundo);
PostMessage ("Trabalho feito!" +
"O múltiplo menos comum é" + Common_Divisor +
"E o maior divisor comum é"+Common_multiple);
}
Alguns internautas na Internet também pensaram em usar o método ImportScripts aqui para resolver o problema da pré -carga dos recursos (o navegador pré -carrega os recursos sem analisar e executar os recursos), e o motivo também é muito simples.
Aninhamento da linhaNo tópico do trabalhador, você também pode criar threads infantis e várias operações são as mesmas.
Problemas de sincronizaçãoO trabalhador não possui um mecanismo de bloqueio, e os problemas de sincronização multithreaded só podem ser resolvidos pelo código (como definir variáveis de sinal).
SharedWebWorker Os trabalhadores da web compartilhados são principalmente adequados para os problemas da simultaneidade de múltiplas conexões. Como precisa lidar com várias conexões, sua API é um pouco diferente dos trabalhadores dedicados. Além disso, trabalhadores compartilhados da Web, como trabalhadores dedicados, não podem acessar o DOM, e o acesso à formação de propriedades também é restrito. Os trabalhadores compartilhados da web também não podem atravessar comunicações.Os scripts de página podem se comunicar com trabalhadores da Web compartilhados, no entanto, um pouco diferente dos trabalhadores dedicados da Web (usando uma comunicação implícita da porta) é que a comunicação é executada explicitamente usando um objeto de porta e anexando um manipulador de eventos de mensagem.
Depois de receber a primeira mensagem do script do Web Worker, o trabalhador da web compartilhado anexa um manipulador de eventos à porta ativada. Geralmente, o manipulador executará seu próprio método PostMessage () para retornar uma mensagem ao código de chamada e, em seguida, o método START () da porta gera um processo de mensagem válido.
Veja o único exemplo que você pode encontrar na Internet: crie um thread compartilhado para receber instruções enviadas de diferentes conexões e, em seguida, implemente sua própria lógica de processamento de instruções. Após a conclusão do processamento de instruções, o resultado será retornado a cada usuário conectado diferente.
Código HTML:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Exemplo de trabalhador compartilhado: Como usar o trabalhador compartilhado em html5 </ititle>
<Cript>
var trabalhador = new SharedWorker ('sharedworker.js');
var log = document.getElementById ('Response_from_worker');
trabalhador.port.addeventListener ('mensagem', função (e) {
// registre os dados de resposta na página da web
log.textContent = e.data;
}, false);
trabalhador.port.start ();
trabalhador.port.postMessage ('ping na página da web do usuário ..');
// O método a seguir enviará a entrada do usuário para o SharedWorker
Função PostMessageToSharedWorker (entrada)
{
// Defina um objeto JSON para construir a solicitação
VAR Instruções = {Instrução: Input.Value};
trabalhador.port.postMessage (Instruções);
}
</script>
</head>
<corpo onload = ''>
<ID de saída = 'Response_from_worker'>
Exemplo de trabalhador compartilhado: como usar trabalhador compartilhado em html5
</aturt>
Envie instruções para o trabalhador compartilhado:
<input type = "text" foco automático oninput = "PostMessageToSharedWorker (this); retornar false;">
</input>
</body>
</html>
Código do arquivo de script:
// Crie um encadeamento compartilhado para receber instruções enviadas de diferentes conexões. Após a conclusão do processamento de instruções, o resultado será retornado a cada usuário conectado diferente.
var connect_number = 0;
onconnect = function (e) {
Connect_Number = Connect_Number+ 1;
// Obtenha a primeira porta aqui
var porta = e.ports [0];
Port.PostMessage ('Uma nova conexão! O número de conexão atual é'
+ connect_number);
port.onMessage = function (e) {
// Receba instruções do solicitante
VAR Instrução = e.data.Instruction;
var resulta = execute_instruction (instrução);
Port.PostMessage ('Solicitação:'+Instrução+'Resposta'+Resultados
+'do trabalhador compartilhado ...');
};
};
/*
* Esta função será usada para executar as instruções enviadas do solicitante
* Instrução @param
* @retornar
*/
função execute_instruction (instrução)
{
var result_value;
// Implemente sua lógica aqui
// execute a instrução ...
return result_value;
}
No exemplo do encadeamento compartilhado acima, um objeto de encadeamento compartilhado é construído na página principal, ou seja, cada página de conexão do usuário e um método é definido para enviar as instruções do usuário recebidas para o thread compartilhado. Ao mesmo tempo, o Connect_Number é definido no trecho de código de implementação do thread compartilhado para registrar o número total de conectados ao thread compartilhado. Depois disso, use o processador de eventos OnConnect para aceitar conexões de diferentes usuários e analisar as instruções que eles passam. Finalmente, um método execute_instruction é definido para executar as instruções do usuário. Após a conclusão da execução da instrução, o resultado será devolvido a cada usuário.
Aqui não usamos o manipulador de eventos OnMessage do tópico do trabalhador como o exemplo anterior, mas usamos outro método para addEventListener. De fato, como mencionado anteriormente, os princípios de implementação desses dois são basicamente os mesmos, mas existem algumas pequenas diferenças aqui. Se você usar o addEventListener para aceitar mensagens de threads compartilhados, primeiro use o método worker.port.start () para iniciar esta porta. Depois disso, você pode receber e enviar mensagens normalmente da mesma forma que um tópico de trabalhador é usado.
Declaração final Coisas que você pode fazer em um tópico :1. Pode usar o setTimeout (), ClearTimeout (), SetInterval (), ClearInterval () e outras funções.
2. Pode usar objetos de navegador.
3. Pode usar o xmlHttPrequest para enviar solicitações.
4. Você pode usar o armazenamento da Web no thread.
5. Você pode usar o eu para obter o escopo deste thread no thread.
Coisas que não podem ser feitas em tópicos :1. Objetos DOM/BOM Além do Navigator não podem ser usados em threads, como janela e documento (se você deseja operar, você só pode enviar mensagens para o criador do trabalhador e operar através de funções de retorno de chamada).
2. Variáveis e funções no encadeamento principal não podem ser usadas no encadeamento.
3. Comandos de operação com efeitos de suspensão não podem ser usados em threads, como alerta, etc.
4. JS não pode ser carregado entre domínios em threads.
Os threads também requerem consumo de recursos, e o uso de threads também trará alguma complexidade; portanto, se não houver motivo suficiente para usar threads adicionais, não os use.
Referência práticaDocumento oficial: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
Classificação do WebWorker Descrição: http://www.w3schools.com/html5/html5_webworkers.asp
Preocupações com modelos: http://www.cuoxin.com/w3school/html5/
Visão geral do WebWorker: https://developer.mozilla.org/en/using_web_workers