javascript - style - jquery: inserción DOM más rápida?

removeattr style jquery

Question

Tengo este mal presentimiento sobre cómo inserto grandes cantidades de HTML. Supongamos que tenemos:

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

y quiero poner esto en

$("#mydiv")

previamente hice algo así como

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

¿Es correcto que jQuery esté analizando html para crear DOM-Objects? Bueno, esto es lo que leí en alguna parte (ACTUALIZACIÓN: me refiero a que he leído, jQuery analiza el html para crear todo el árbol DOM a mano, ¿no tiene sentido? ) , Así que cambié mi código:

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

Se siente más rápido, ¿verdad? Y es correcto que esto sea equivalente a:

document.getElementById("mydiv").innerHTML += html ? o está jquery haciendo cosas adicionales caras en el fondo?

Me encantaría aprender alternativas también.

Answer 1

¿Qué estás tratando de evitar? "Un mal presentimiento" es increíblemente vago. Si ha escuchado "el DOM es lento" y decidió "evitar el DOM", entonces esto es imposible. Cada método de inserción de código en una página, incluido innerHTML, dará como resultado la creación de objetos DOM. El DOM es la representación del documento en la memoria de su navegador. Desea que se creen objetos DOM.

La razón por la que las personas dicen "el DOM es lento" se debe a que la creación de elementos con document.createElement() , que es la interfaz DOM oficial para crear elementos, es más lenta que el uso de la propiedad innerHTML no estándar en algunos navegadores. Esto no significa que crear objetos DOM sea malo, es necesario crear objetos DOM, de lo contrario su código no haría nada.

Answer 2

Creo una cadena gigante con y anexar esta cadena con jquery. Funciona bien y rápido, para mí.

Answer 3

La respuesta sobre el uso de un fragmento DOM está en el camino correcto. Si tiene un grupo de objetos html que está insertando constantemente en el DOM, verá algunas mejoras de velocidad al usar el fragmento. Esta publicación de John Resig lo explica muy bien: http://ejohn.org/blog/dom-documentfragments/

Answer 4

Mencionas que estás interesado en alternativas. Si nos fijamos en la lista de complementos jQuery relacionados con DOM , encontrará varios que están dedicados a la generación programática de árboles DOM. Ver por ejemplo SuperFlyDom o DOM Elements Creator ; pero hay otros

Answer 5

Para empezar, escriba una secuencia de comandos que mide el tiempo que lleva hacerlo 100 o 1,000 veces con cada método.

Para asegurarse de que las repeticiones no se hayan optimizado de alguna manera, no soy un experto en motores de JavaScript, cambie el html que está insertando cada vez, digamos poniendo ''0001'' luego ''0002'' y luego ''0003'' en un cierto celda de la mesa

Answer 6

Pruebe lo siguiente:

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

Las otras respuestas, incluida la respuesta aceptada, son más lentas por 2-10x : jsperf .

La respuesta aceptada no funciona en IE 6, 7 y 8 porque no puede establecer innerHTML de un elemento <table> , debido a un error en IE: jsbin .

Answer 7

innerHTML es notablemente rápido, y en muchos casos obtendrá los mejores resultados simplemente estableciendo eso (yo solo usaría append).

Sin embargo, si ya hay mucho en "mydiv", está forzando al navegador a analizar y volver a mostrar todo ese contenido (todo lo que había antes, más todo su nuevo contenido). Puede evitar esto agregando un fragmento de documento en "mydiv" en su lugar:

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

De esta forma, solo se analiza el contenido nuevo (inevitable) y el contenido existente no.

EDITAR: Mi mal ... he descubierto que innerHTML no está bien soportado en fragmentos de documentos. Puede usar la misma técnica con cualquier tipo de nodo. Para su ejemplo, puede crear el nodo de la tabla raíz e insertar el innerHTML en eso:

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

Answer 8

La forma más rápida de agregar elementos

La forma más rápida de anexar al árbol DOM es almacenar todo su apendice en un solo fragmento de DOM, luego anexar el fragmento dom al dom.

Este es el método que uso en mi motor de juego.

//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, puedo renderizar ~ 1000 elementos en la pantalla ~ 40 veces por segundo en Firefox 4.

Aquí hay un caso de uso.