Press "Enter" to skip to content

Otimizando manipulação do DOM – DocumentFragment

Sempre nos preocupamos com o desempenho das nossas aplicações. Vamos de estratégias de cache a otimizações das consultas ao banco de dados, sabemos o que fazer no lado do servidor. Mas nas nossas aplicações web as vezes esquecemos das melhores práticas no lado do cliente (html/js/css).

A preocupação com desempenho no lado do cliente fica ainda maior com o aumento do uso de smartphones e tablets. Mesmo com o avanço dos últimos hardwares/softwares eles ainda não tem o desempenho de um desktop/notebook.

Chega de papo e vamos ver um pouco sobre o documentFragment.

Utilizando a definição que está no MDN.

DocumentFragments are DOM Nodes. They are never part of the main DOM tree. The usual use case is to create the document fragment, append elements to the document fragment and then append the document fragment to the DOM tree. In the DOM tree, the document fragment is replaced by all its children.

Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element’s position and geometry). Consequently, using document fragments often results in better performance.

Já que o documentFragment é em memória, e não causa reflow vamos ajudar um pouco o browser com o trabalho dele ;).

O exemplo é simples, vamos listar estados e cidades, de acordo com o estado selecionado as cidades serão carregadas.

document-fragment01

O código é simples, começando com a estrutura básica do HTML com os elementos onde adicionaremos estados e cidades e os elementos onde adicionaremos o resultado com o total de ms que cada função demorou para ser executada.

Existe uma função chamada calcularTempo que recebe a função que será executa e também é responsável por escrever o tempo de execução.

Quando a página é carregada os estados são carregados, em um dos elementos utilizando append pra cada estado, e no outro utilizando documentFragment com todo o benefício de performance que ele entrega.

Utilizar documentFragment é simples, mas vale dizer que precisamos escrever um pouco mais de código.

Ao selecionar o estado as cidades são adicionadas, também cada elemento de uma forma para comparação.

A imagem abaixo mostra a diferença nos tempos de execução.

document-fragment2

A diferença é significativa, e é um exemplo simples, imagine todas as manipulações que fazemos em um cenário mais complexo.

Mas a diferença fica mais evidente quando visualizamos essa página em um smartphone, na imagem abaixo a página foi acessada por um iPhone 5, e novamente listadas as cidades do estado de São Paulo.

document-fragment3

Ótimos resultados e implementação simples 😉

Pode testar a página aqui.

Código fonte completo no github.

Até o próximo post.

  • MayogaX

    muito bom!!

    Realmente é um item considerável a performance em client. Outra coisa é tomar cuidado com essa mania de “append” e ficar adicionando infinitamente itens na tela. Chega uma hora que começa a fica lenta a tela, mesmo sendo só itens na tela. Fazer tetes sobre isso depois.

    Mas, incrivel, não conhecia o documentFragment. Show!!