Arquivo da tag: HTML5

WebWorkers

HTML5_Logo_512A execução de código Javascript é feita somente usando uma thread pelo navegador cliente. O navegador nunca vai executar dois eventos ao mesmo tempo. Funcões Javascript que tem execução mais longa travam a interface com o usuário até que termine sua execução.

As aplicações Web podem rodar melhor se as partes do código Javascript que exigem maior processamento fossem separadas em mais threads.

Execute dentro de uma página o código Javascript abaixo que simula um processamento demorado e tente usar a interface da página. Tudo estará travado, até que a execução do código termine.


function execucaoDemorada(){

    var tempoDeEspera = 10000; //10 segundos
    var inicio = (new Date()).getTime();
    var i = 0;
    while(((new Date()).getTime() - inicio) <= tempoDeEspera){
        console.log(i);
        i++;
    }
}

Em HTML5 é possível usar Web Workers, que dá poder ao Javascript em executar thread paralelas sem bloquear/travar a interface com o usuário.

Um WebWorker não deve ser usado para operações triviais, e sim para operações complexas e longas:

  • Codificação/decodificação de uma sequência grande;
  • Cálculos matemáticos complexos (por exemplo, números primos, criptografia, simulados, algoritmos de reconhecimentos, etc);
  • Classificando uma grande variedade de dados;
  • Solicitações de rede e processamento de dados;
  • Cálculos e manipulação de dados sobre o local/sessionStorage;
  • Algoritmo de verificação/checagem de sintaxe ou análise outro texto em tempo real (por exemplo, a verificação ortográfica);
  • Manipulação de Imagem;
  • Analisar ou processar vídeo ou dados de áudio (incluindo face e reconhecimento de voz);
  • Processamento de matrizes de grandes dimensões ou respostas JSON enormes;

Um worker nada mais é que um script que irá ser carregado e executado em segundo plano, por exemplo:


var wk1 = new Worker("worker1.js");

A função construtura Worker() recebe por parâmetro uma URL especificando o arquivo contendo o código Javascript que será tratado em um nova thread,

O código javascript contido no arquivo carregado pelo worker não tem acesso ao objeto Window, Document e a árvore DOM da página que iniciou sua execução.

A comunicação entre o worker e a página ocorre através de mensagens. Objeto gerado pela classe Work oferece o método postMessage(). É ele que vai enviar solicitações da página para o código dentro do workers.  Além de enviar string, oferece envio de mensagens no no formato JSON. E as mensagens de retorno podem ser capturada associando uma função ao evento  do objeto worker criado.


//Código na página.

var wk1 = new Worker("worker1.js"); //Criando o worker

//Monitorando as mensagens de retorno.
wk1.onmessage = function (e) {
    if (e.data.acao == "mostrar")
        document.getElementById("incrementos").innerHTML = e.data.incremento;
    else if (e.data.acao == "parar")
        wk1.terminate();
};

//É aqui que começa a execução do worker
wk1.postMessage("executar");

O evento onmessage fica monitorando as mensagens vindas worker para página. A função que vai tratar o evento recebe um parâmetro que possui uma propriedade data que contem a mensagem enviada pelo worker. No exemplo acima, o retorno a mensagem de retorno do worker é um objeto JSON.

O código contido no arquivo (do worker) também tem um evento onmessage e deve ter uma função associada, mas aqui é o worker que vai ficar escutando a página. Quando o método postMessage() na página é usado, é a função onmessage do worker que captura a mensagem que também é acessada pela propriedade data do parâmetro da função.

Para o worker enviar uma mensagem para a página, é também através do método postMessage().


//Código do worker.

// Evento que monita mensagens vindas da página para o worker
onmessage = function (e) {

    //e.data contém o valor enviado pela página.
    if (e.data === "executar") {

        execucaoDemorada();

        postMessage("fim");
    }
};

function execucaoDemorada(){

    var tempoDeEspera = 10000; //10 segundos
    var inicio = (new Date()).getTime();
    var i = 0;
    while(((new Date()).getTime() - inicio) <= tempoDeEspera){
        postMessage({ "acao": "mostrar", "incremento": i }); //envia uma nova mensagem para a página
        i++;
    }
    postMessage({ "acao": "parar"}); //envia uma nova mensagem para a página
}

Uma boa prática é fazer a liberação da thread na página pelo método terminate() do próprio objeto worker.

Outra informação importante é a possibilidade de ter páginas auto-suficiente, ou seja, o código a ser executado numa nova thread pode estar nela mesmo, sem a necessidade de separar num novo arquivo Javascript.

Até mais e baixe o exemplo aqui.

Usando a API WebStorage da Open Web Plataform (HTML5 e seus amigos)

HTML5_Logo_512Em HTML5 é possível armazenar dados no lado do cliente no formato pares de valor de chave, de forma simular como é feito com as Cookies, só que mais fácil. Normalmente é a linguagem de servidor quem cria e envia as Cookies ao cliente.
Com a API de Storage tudo é manipulado diretamente no cliente por Javascript, não há interferência do servidor.
A API WebStorage disponibiliza duas formas para armazenamento no cliente: SessionStorage e LocalStorage.

sessionStorage
: armazenamento de dados independente (não compartilhado entre janelas/guias). Os dados são excluídos quando o usuário fecha a janela/guiado navegador.

localStorage: armazenamento de dados compartilhado entre janelas (comportamento semelhante ao do cookie). Mesmo fechando o navegador, os dados ficam armazenados e somente serão apagados se o cache for limpo ou se solicitada sua exclusão via programação JS.

Vamos aos exemplos.
A ideia aqui é armazenar o que o usuário informou no formulário HTML abaixo usando as duas maneiras apresentadas acima, e depois recuperar a informação.
<textarea id="texto" rows="5" cols="5"></textarea>
<br />
<input type="button" value="Salvar no cliente" onclick="salvar()"/>
<input type="button" value="Recuperar no cliente" onclick="recuperar()"/>

O evento onclick do primeiro input button vai disparar a função salvar(), que tem por objetivo salvar os dados no cliente usando o método setItem da propriedade localStorage. Vamos ao código.

    function salvar() {
        localStorage.setItem('teste', texto.value);
    }

E evento onclick do segundo input button vai disparar a função recuperar(), que vai acessar o valor salvo através do método getItem da propriedade localStorage e devolvê-lo para seu respectivo input.

    function recuperar() {
        document.getElementByI('texto').value = localStorage.getItem('teste');
    }

Usando a Ferramenta de Desenvolvedores do Google Chrome é possível inspecionar o que está armazenado localmente.

localstorage

A nível de programação, para usar a SessionStorage não muda quase nada. Ao invés de usar a propriedade localStorage, deve usar sessionStorage. E os métodos setItem e getItem continuam com o mesmo objetivo, adicionar e remover valores.

Quando usado Cookie, ela é trafegada sempre entre cliente e servidor pelo protocolo HTTP. Isso não ocorre com esta API, a informação é exclusivamente mantida no cliente, e nunca “sobe” para o servidor.

Outros dois métodos importantes disponibilizados são o removeItem, e clear. O primeiro remove o item de nome informado no parâmetro e o segundo, limpa todos os itens do domínio. Ambos funcionam tanto no localStorage como no sessionStorage.