innerHTML ou createElement: qual o melhor?

Gustavo Paes, 09/07/2011

É aquela história história de sempre: depende. Fiz alguns testes no site jsperf para descobrir qual a melhor versão.

A conclusão é a seguinte: O innerHTML é muito mais rápido quando se utiliza apenas uma vez, ou seja, quando se concatena todo o conteúdo que será criado em uma string e só depois usa o innerHTML.

Se isso não for possível, com toda certeza, utilize o createElement com o appendChild, que são muito mais eficientes em loop do que o innerHTML

Guardar referências em variáveis

O teste serviu também para mostrar o quão importante é guardar referências de elementos HTML em uma variável para evitar o processamento do DOM novamente.

Por exemplo, dentro de um for para que utilizar sempre o getElementById("meu-id") se é possível fazer isso apenas uma vez fora do for guardando a referência em uma variável.

// modo errado
for (letter in items)
  document.getElementById("my-list").appendChild( ... );

// modo certo
var elem = document.getElementById("my-list");
  for (letter in items)
    elem.appendChild( ... );

Essa pequena mudança traz um ganho considerável no processamento do seu script.