Por que você deve sempre anexar elementos DOM usando DocumentFragments

Se você se pegar anexando uma série de elementos ao DOM, sempre deve usar um DocumentFragment para fazer exatamente isso.

A DocumentFragment is a minimal document object that has no parent. It is used as a light-weight version of document to store well-formed or potentially non-well-formed fragments of XML.
https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

Por quê? Não só está usando DocumentFragments para anexar cerca de 2700 vezes mais rápido do que anexar com innerHTML, mas também mantém o recálculo, pintura e layout em um mínimo.

TL; DR: Use DocumentFragments. http://jsperf.com/document-fragment-vs-innerhtml-vs-looped-appendchild

Quando normalmente faríamos isso para anexar elementos:

var i = 0; while (i < 200) {
    div.innerHTML += '<li>My list item #' + i + '</li>';
i++; }

fazer isso seria muito mais rápido (embora não seja o ideal):

var i = 0; while (i < 200) {
    var el = document.createElement('li');
    el.innerText = 'This is my list item number ' + i;
    div.appendChild(el);
i++; }

No entanto, essa solução sofre com o recálculo de estilos, pintura e layout – muitos deles – algo com o qual você deve ter muito cuidado ao criar aplicativos da web de alto desempenho.

Leia mais sobre o recálculo de estilos, pintura e layout aqui: http://stackoverflow.com/questions/11623299/what-does-recalculate-layout-paint-mean-in-chrome-developer-tool-timeline-record

Não seria ótimo se houvesse uma maneira de ignorar o recálculo, a pintura e o layout de cada elemento que adicionamos e, em vez disso, acontecer apenas uma vez? Há sim!

var el;
var i = 0;
var fragment = document.createDocumentFragment();

while (i < 200) {
    el = document.createElement('li');
    el.innerText = 'This is my list item number ' + i;
    fragment.appendChild(el);
i++; }

div.appendChild(fragment);

Em vez de anexar os elementos diretamente ao documento quando eles são criados, anexe-os ao DocumentFragment e termine adicionando-os ao DOM.

Agora há apenas uma (grande) mudança de DOM acontecendo e, por causa disso, também estamos mantendo o recálculo, pintura e layout em um mínimo absoluto.