jQuery: inserção DOM mais rápida?

Question

Eu tenho esse sentimento ruim sobre como eu inserir grandes quantidades de HTML. Vamos supor que temos:

var html="<table>..<a-lot-of-other-tags />..</table>"

e eu quero colocar isso em

$("#mydiv")

anteriormente eu fiz algo como

var html_obj = $(html); $("#mydiv").append(html_obj);

É verdade que jQuery é analisar html para criar DOM-Objects? Bem, isso é o que eu li em algum lugar (UPDATE:?! Eu quis dizer que eu li, jQuery analisa o HTML para criar toda a árvore DOM à mão - o seu direito absurdo ) , então eu mudei meu código:

$("#mydiv").attr("innerHTML", $("#mydiv").attr("innerHTML") + html);

Feels mais rápido, não é? E é correto que este é equivalente a:

document.getElementById("mydiv").innerHTML += html? ou é jquery fazendo algumas coisas caro adicional no fundo?

gostaria de aprender alternativas também.

Answer 1

innerHTML é notavelmente rápido, e em muitos casos, você vai obter os melhores resultados apenas definindo que (eu iria usar apenas acrescentar).

No entanto, se há muito já "mydiv", então você está forçando o navegador para analisar e processar todo esse conteúdo novamente (tudo o que estava lá antes, além de todos os seus novos conteúdos). Você pode evitar isso anexando um fragmento do documento para "mydiv" em vez disso:

var frag = document.createDocumentFragment();
frag.innerHTML = html;
$("#mydiv").append(frag);

Desta forma, apenas o seu novo conteúdo é analisado (inevitável) e o conteúdo existente não.

EDIT: Meu ruim ... Eu descobri que innerHTML não é bem suportado em fragmentos de documentos. Você pode usar a mesma técnica com qualquer tipo de nó. Para o seu exemplo, você pode criar o nó da tabela raiz e inserir o innerHTML em que:

var frag = document.createElement('table');
frag.innerHTML = tableInnerHtml;
$("#mydiv").append(frag);

Answer 2

Tente o seguinte:

$("#mydiv").append(html);

As outras respostas, incluindo a resposta aceita, são mais lento por 2-10x : JSPerf .

A resposta aceita não funciona no IE 6, 7 e 8 porque você não pode conjunto innerHTML de um elemento <table>, devido a um bug no IE: jsbin .

Answer 3

O que você está tentando evitar? "Um mau pressentimento" é extremamente vago. Se você já ouviu "o DOM é lento" e decidiu "evitar o DOM", então isso é impossível. Cada método de inserção de código em uma página, incluindo innerHTML, resultará em DOM objetos que está sendo criado. O DOM é a representação do documento na memória do seu browser. Você deseja DOM objetos a ser criado.

A razão pela qual as pessoas dizem "o DOM é lento" é porque a criação de elementos com document.createElement(), que é a interface DOM oficial para os elementos que criam, é mais lento do que usando a propriedade innerHTML não-padrão em alguns navegadores. Isso não significa que a criação de objetos DOM é ruim, é necessário para criar objetos DOM, caso contrário, seu código não faria nada.

Answer 4

A resposta sobre o uso de um fragmento DOM está no caminho certo. Se você tem um monte de html objetos que você está inserindo constante no DOM, então você vai ver algumas melhorias de velocidade usando o fragmento. Este post por John Resig explica isso muito bem: http://ejohn.org/blog/dom-documentfragments/

Answer 5

A maneira mais rápida de itens de anexação

A maneira mais rápida de acréscimo para a árvore DOM é para amortecer todo o seu append em um único fragmento DOM, em seguida, acrescentar o fragmento dom ao dom.

Este é o método que eu uso no meu motor de jogo.

//Returns a new Buffer object
function Buffer() {

    //the framgment
    var domFragment = document.createDocumentFragment();

    //Adds a node to the dom fragment
    function add(node) {
        domFragment.appendChild(node);
    }

    //Flushes the buffer to a node
    function flush(targetNode) {

        //if the target node is not given then use the body
        var targetNode = targetNode || document.body;

        //append the domFragment to the target
        targetNode.appendChild(domFragment);

    }

    //return the buffer
    return {
        "add": add,
        "flush": flush
    }
}


//to make a buffer do this
var buffer = Buffer();

//to add elements to the buffer do the following
buffer.add(someNode1);

//continue to add elements to the buffer
buffer.add(someNode2);
buffer.add(someNode3);
buffer.add(someNode4);
buffer.add(someN...);

//when you are done adding nodes flush the nodes to the containing div in the dom
buffer.flush(myContainerNode);

Usando este objeto eu sou capaz de tornar ~ 1000 itens para a tela ~ 40 vezes por segundo no Firefox 4.

Aqui está um caso de uso.

Answer 6

Para começar, escrever um script que os tempos quanto tempo leva para fazê-lo 100 ou 1.000 vezes com cada método.

Para certificar-se as repetições não são de alguma forma otimizada longe - eu sou nenhum expert em motores de JavaScript - variar a html você está inserindo cada vez, dizer, colocando '0001' então '0002' então '0003' em uma determinada célula da tabela.

Answer 7

I criar uma cadeia gigante com e, em seguida, anexar esta cadeia com jQuery. Funciona bem e rápido, para mim.

Answer 8

Você menciona estarem interessados ??em alternativas. Se você olhar para a lista de plugins jQuery DOM-relacionados você encontrará vários que são dedicados a árvores DOM gerando programaticamente. Ver, por exemplo SuperFlyDom ou DOM Elements Criador ; mas há outros.