O uso do DocumentFragment para criação de nós no DOM é muito importante no que diz respeito a performance do seu javascript, quando é necessário fazer a inserção de vários elementos de uma vez só.
DocumentFragment é um container para nós DOM, que pode receber elementos e depois ser adicionado (através do método appendChild) a um nó. O benefício se dá tanto na performance do script (como veremos logo mais, e também pode ser visto nesse post do John Resig) como na renderização da página (reflow e repaint) no browser, uma vez que ao invés de ter que adicionar n elementos, um a um, eles são adicionados de uma vez só.
Abaixo tem um trecho de código usando o DocumentFragment, exemplificando o uso:
var div = document.getElementById("minha_div"); //passo 1
var fragment = document.createDocumentFragment();
for(var i=0; i<100; i++) {
var d = document.createElement("p");
fragment.appendChild(d); //passo 2
}
div.appendChild(fragment); //passo 3
O uso é bem simples: deve-se criar um DocumentFragment, atribuindo a uma variável (passo 1), então para cada elemento criado esse elemento é adicionado ao documentFragment (passo 2) e, por final, se adiciona o DocumentFragment ao element que será o container desses nós no DOM.
Aqui http://jsfiddle.net/chrisbenseler/RQ28C/ tem um teste comparando a criação com e sem DocumentFragment; para criar 5000 elementos
e adicionar a uma div, com DocumentFragment o browser (Firefox 14.0.1 do Ubuntu) leva em média 230 milisegundos; já sem, 330 milisegundos.