Neste post vamos ver como manipular elementos do DOM, com um custo menor de performance. Em relação a manipulação direta.
Primeiro vamos criar um exemplo simples.

Vamos definir um elemento “select” com nenhum elemento.

<select id="navegadores"></select>

Acima temos um elemento um elemento “select” com o id “navegadores”.

Agora vamos adicionar o script, para adicionar os elementos.

var navegadoreElemento = document.getElementById("navegadores");
var fragmento = document.createDocumentFragment();
var navegadores = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];

navegadores.forEach(function(valor, indice) {
	var option = new Option(valor, indice);
  	fragmento.appendChild(option);
});

navegadoreElemento.options.length = 0;
navegadoreElemento.appendChild(fragmento);

Primeiro declaramos uma variável que manterá a referencia do elemento, com o id “navegadores”.
Em seguida, declaramos uma variável com o nome “fragmento”, que conterá uma referencia de “Fragment”.
A variável “navegadores”, temos um array de string, com alguns navegadores.

Abaixo, temos um “forEach”, que utiliza o array “navegadores”. Já no corpo do “forEach”, temos uma instância da classe “Option”. Onde utilizamos o construtor, com de “text” e “value”. Que resultará em uma tag “option”, com seus respectivos valores.

Logo abaixo, apendamos uma nova instância de “Option”, na variável “fragmento”. Nesse momento, estamos utilizando apenas um “intermediário”, ou seja, não apendamos o novo elemento no DOM. Isso traz um ganho. Porque “deixamos de mexer no DOM, a cada interação do forEach”.

Depois, “limpamos” todos o “options” da tag “select” (não era necessário, porem quiser mostrar um meio de limpar os elementos, de forma fácil).
E por ultimo, informamos o que o elemento “navegadores”, deve “apendar” os elementos de “fragmento”.

Veja o exemplo online http://jsfiddle.net/andrebtoe/91nuobdh.

Também deixei um exemplo sem o uso de “fragment”; Este recurso está disponível do I.E., versão 6.
http://jsfiddle.net/andrebtoe/91nuobdh/1.

Vamos modificar o exemplo um pouco. Agora, vamos adicionar os navegadores 1000 vezes, em ambos exemplo e ver a performance:

Primeiro exemplo:

var navegadoreElemento = document.getElementById("navegadores");
var fragmento = document.createDocumentFragment();
var navegadores = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];

for(var i = 0; i < 10000; i++){
    navegadores.forEach(function(valor, indice) {
        var option = new Option(valor, indice);
        fragmento.appendChild(option);
    });
}

navegadoreElemento.options.length = 0;
navegadoreElemento.appendChild(fragmento);

Repare que tem um “for”, com 1000 interações, ou seja, o array de navegadores, será percorrido 1000.
http://jsfiddle.net/91nuobdh/6
E o mesmo acontece com o segundo exemplo.

var navegadoreElemento = document.getElementById("navegadores");
var fragmento = document.createDocumentFragment();
var navegadores = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];

navegadoreElemento.options.length = 0;

for(var i = 0; i < 1000; i++){
    navegadores.forEach(function(valor, indice) {
        var option = new Option(valor, indice);
        navegadoreElemento.appendChild(option);
    });
}

Veja o exemplo online http://jsfiddle.net/91nuobdh/5.
Com esses novos exemplos, pode ver a diferença de usar um elemento “fragment”.

Espero ter ajudado!
Até a próxima!

Publicidade