English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Web Workers são JavaScript executados em background, sem afetar o desempenho da página.
Quando o script é executado na página HTML, o estado da página é irreponível até que o script seja concluído.
Web Workers são JavaScript executados em background, independentes de outros scripts, e não afetam o desempenho da página. Você pode continuar a fazer o que quiser: clicar, selecionar conteúdo, etc., enquanto o web worker executa no background.
Internet Explorer 10, Firefox, Chrome, Safari e Opera suportam Web workers.
O exemplo a seguir cria um web worker simples que conta no background:
demo-Código do arquivo "workers.js":
var i=0;
function timerCount()
{
i=i+1;
postMessage(i);
setTimeout("timerCount()",500);
}
timerCount();
Antes de criar o web worker, verifique se o navegador do usuário suporta ele:
if(typeof(Worker)!=="undefined")
{
// Sim! O Web worker é suportado!
// alguns códigos.....
}
else
{
//Desculpe! O Web Worker não é suportado
}
Agora, vamos criar nosso web worker em um JavaScript externo.
Aqui, criamos o script de contagem. O script está armazenado em "demo"-no arquivo "workers.js":
var i=0;
function timerCount()
{
i=i+1;
postMessage(i);
setTimeout("timerCount()",500);
}
timerCount();
A parte importante do código acima é o método postMessage() - Ele é usado para enviar uma mensagem de volta para a página HTML.
Atenção: O web worker geralmente não é usado para scripts tão simples, mas para tarefas que consomem mais recursos de CPU.
Já temos o arquivo web worker, agora precisamos chamá-lo da página HTML.
O código a seguir verifica se existe worker, se não existir,- Ele cria um novo objeto web worker, e então executa "demo"-workers.js" no código:}
if(typeof(w) == "undefined")
{
w = new Worker("demo-workers.js");
}
Depois disso, podemos enviar e receber mensagens do web worker.
Adicione um ouvinte de evento "onmessage" ao web worker:
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Quando o web worker passa uma mensagem, o código no ouvinte de eventos é executado. event.data contém os dados do event.data.
Depois de criarmos o objeto web worker, ele continuará a ouvir mensagens (mesmo após o script externo ser concluído) até que seja encerrado.
Para encerrar o web worker e liberar o navegador/Para usar recursos da máquina, use o método terminate():
w.terminate();
Já vimos o código do Worker no arquivo .js. Abaixo está o código da página HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Site de Tutoriais Básicos(oldtoolbag.com)</title>
</head>
<body>
<p>Contagem: <output id="result"></output></p>
<button onclick="startWorker()">Iniciar trabalho</button>
<button onclick="stopWorker()">Parar trabalho</button>
<p><strong>Atenção：</<strong>Internet Explorer 9 e versões mais antigas do navegador Internet Explorer não suportam Web Workers.</p>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo-workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Desculpe, seu navegador não suporta Web Workers...";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>Teste e Veja ‹/›Devido ao fato de que os Web Workers estão em arquivos externos, eles não podem acessar os seguintes objetos JavaScript:
Objeto Window
Objeto Document
Objeto Parent