funmachine

Optimizar o DOM: Não usar o DOM

Deixe um comentário

O DOM é uma API independente da linguagem e que serve fundamental para trabalhar com XML e HTML. Apesar de ser uma API agnóstica, as arquiteturas dos browsers implementam uma interface em Javascript e dividiram a implementação DOM e Javascript em dois módulos diferentes. Por exemplo, o Chrome usa o WebCore como motor para renderizar páginas e DOM (do WebKit), mas usa o seu próprio motor Javascript (V8).

Em aplicações Web com interfaces interativas é comum o o uso (e abuso) de Javascript, nomeadamente no acesso e escrita do DOM. No entanto, a arquitetura de DOM e implementação Javascript separadas tem um custo: a performance. A verdade é que como o Javascript tem que comunicar com um módulo diferente (implementação DOM) cada vez que quer ler e ou escrever no DOM a performance acaba por se degradar.

Não podemos fazer nada em relação a isto a não ser otimizar o nosso código Javascript de forma a fazer o menos pedidos possíveis de escrita e leitura DOM. Vejamos um exemplo simples: queremos uma função que imprima os 150 primeiros algarismos num qualquer elemento do DOM. Uma versão poderia ser:

function print150()
{
  for(var i = 0; i < 150; i++)
  {
    document.getElementById('elem').innerHTML += i;
  }
}

À partida este código é inofensivo, mas em termos da performance a nível do DOM, este código é um serial killer. Ao longo do ciclo estamos constantemente a aceder e escrever no DOM, e como já percebemos, o acesso ao DOM é custoso. Por isso uma versão optimizada e com maior performance será calcular a string a imprimir e depois com  um único acesso imprimir o resultado:

function print150()
{
  var toPrint;
  for(var i = 0; i <150; i++)
  {
    toPrint+=i.toString();
  }
  document.getElementById('elem').innerHTML = toPrint;
}

Esta versão faz uso da regra de ouro ao programar o DOM se queremos eficiência: usar o DOM levemente, e ficar o mais possível no ECMAScript.

Anúncios

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s