Latest web development tutorials

HTML5 Web Workers

trabalhador web executar JavaScript em segundo plano e não afeta o desempenho da página.

O que é um trabalhador Web?

Ao executar um script em uma página HTML, o estado de página não responde até que o script está completo.

trabalhador web executar JavaScript em segundo plano, independente de outros scripts não afetará o desempenho da página. Você pode continuar a fazer o que está disposto a fazer: Clique para selecionar o conteúdo, etc., num momento em que trabalhador web executado em segundo plano.

Suporte a navegadores

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari e os trabalhadores da Web de apoio Opera.

exemplos HTML5 Web Workers

O exemplo a seguir cria um trabalhador web simples, contando em segundo plano:

Exemplos

Contagem:




tente »

código de arquivo demo_workers.js:

var i = 0;

timedCount function ()
{
i = i + 1;
postMessage (I);
setTimeout ( "timedCount ()", 500);
}

timedCount ();

Detectar se o navegador suporta o trabalho na Web

Antes de criar um trabalhador web, por favor, verifique o navegador do usuário suporta:

if (typeof (Trabalhador)! == "undefined")
{
// Sim! Apoio trabalhador Web!
//Alguns códigos .....
}
mais
{
Trabalhador Web // Desculpe! Não é suportada
}

Crie um arquivo de trabalhador web

Agora, vamos criar o nosso trabalhador web em um JavaScript externo.

Aqui, nós criamos uma contagem script. O script é armazenado no arquivo "demo_workers.js":

var i = 0;

timedCount function ()
{
i = i + 1;
postMessage (I);
setTimeout ( "timedCount ()", 500);
}

timedCount ();

parte importante do código acima é postMessage método () - é usada para retornar uma notícia página HTML.

Nota: trabalhador web geralmente não é usado para tais scripts simples, mas para tarefas mais intensiva da CPU.

Criar um objeto de trabalho na Web

Nós já temos um arquivo trabalhador web, e agora temos de chamá-lo de uma página HTML.

O código a seguir detecta a presença do trabalhador, se não houver nenhum - ele cria um novo objeto trabalhador web e depois executar "demo_workers.js" código:

if(typeof(w)=="undefined")
{
    w=new Worker("demo_workers.js");
}

Podemos então ter lugar e receber mensagens do trabalhador web.

Adicionar ao trabalhador web um "onMessage" ouvintes de eventos:

w.onmessage = function (event) {
. Document.getElementById ( "resultado") innerHTML = event.data;
};

rescisão de trabalho na Web

Quando criamos um objeto trabalhador web, que vai continuar a ouvir as mensagens (mesmo após a conclusão de um script externo) até que seja rescindido por.

Para terminar um trabalhador web, e liberar os recursos do navegador / computador, use o método terminar ():

w.terminate ();

exemplo de código de trabalho na Web completa

Nós vimos js código Trabalhador arquivo. Aqui está a página de código HTML:

Exemplos

<! DOCTYPE html>
<Html>
<Head>
<Charset Meta = "utf-8">
<Title> Este tutorial (w3big.com) </ title>
</ Head>
<Body>

<P> contagem: <output id = "resultado"> </ saída> </ p>
<Button onclick = "startWorker ()"> para trabalhar </ button>
<Button onclick = "stopWorker ()"> parou </ button>

<P> <strong> Nota: </ strong> Internet Explorer 9 e versões anteriores do navegador IE não suporta Web Workers </ p>.

<Script>
var W;

funcionar startWorker () {
if (typeof (Trabalhador)! == "undefined") {
if (typeof (w) == "undefined") {
w = new Trabalhador ( "demo_workers.js");
}
w.onmessage = function (event) {
. Document.getElementById ( "resultado") innerHTML = event.data;
};
} Else {
document.getElementById ( "resultado") innerHTML = "Desculpe, seu navegador não suporta Web Workers ..." .;
}
}

stopWorker function ()
{
w.terminate ();
w = indefinido;
}
</ Script>

</ Body>
</ Html>

tente »

Trabalhadores da Web e do DOM

Desde o trabalhador web em um arquivo externo, elas não podem acessar o objeto JavaScript o seguinte exemplo:

  • objeto de janela
  • Document Object
  • objetos pai