¿Cuál es la forma más eficiente de crear elementos HTML usando jQuery?

Recientemente he estado haciendo muchas ventanas emergentes de ventanas modales y qué no, para lo cual usé jQuery. El método que utilicé para crear los nuevos elementos en la página ha sido abrumadoramente similar a:

$("<div></div>");

Sin embargo, tengo la sensación de que este no es el mejor ni el método más eficiente para hacerlo. ¿Cuál es la mejor manera de crear elementos en jQuery desde una perspectiva de rendimiento?

Esta respuesta tiene los puntos de referencia para las sugerencias a continuación.

Uso $(document.createElement('div')); Benchmarking muestra que esta técnica es la más rápida. Supongo que esto se debe a que jQuery no tiene que identificarlo como un elemento y crear el elemento en sí.

Realmente debería ejecutar puntos de referencia con diferentes motores de Javascript y sopesar su audiencia con los resultados. Toma una decisión a partir de ahí.

personalmente sugeriría (para facilitar la lectura):

$('<div>');

algunos números sobre las sugerencias hasta ahora (safari 3.2.1 / mac os x):

var it = 50000;

var start = new Date().getTime();
for (i = 0; i < it; ++i)  {
  // test creation of an element 
  // see below statements
}
var end = new Date().getTime();
alert( end - start );                

var e = $( document.createElement('div') );  // ~300ms
var e = $('<div>');                          // ~3100ms
var e = $('<div></div>');                    // ~3200ms
var e = $('<div/>');                         // ~3500ms              

Pregunta:

¿Cuál es la forma más eficiente de crear elementos HTML usando jQuery?

Responder:

Como se trata de jQueryeso, creo que es mejor usar este enfoque (limpio) (que está usando)

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'text':'Text Only',
}).on('click', function(){
    alert(this.id); // myDiv
}).appendTo('body');

MANIFESTACIÓN.

De esta manera, incluso puede usar controladores de eventos para el elemento específico como

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'style':'cursor:pointer;font-weight:bold;',
    'html':'<span>For HTML</span>',
    'click':function(){ alert(this.id) },
    'mouseenter':function(){ $(this).css('color', 'red'); },
    'mouseleave':function(){ $(this).css('color', 'black'); }
}).appendTo('body');

MANIFESTACIÓN.

Pero cuando se trata de muchos elementos dinámicos, debe evitar agregar eventos handlersen un elemento en particular, en su lugar, debe usar un controlador de eventos delegado, como

$(document).on('click', '.myClass', function(){
    alert(this.innerHTML);
});

var i=1;
for(;i<=200;i++){
    $('<div/>', {
        'class':'myClass',
        'html':'<span>Element'+i+'</span>'
    }).appendTo('body');
}

MANIFESTACIÓN.

Por lo tanto, si crea y agrega cientos de elementos con la misma clase, es decir ( myClass), se consumirá menos memoria para el manejo de eventos, ya que solo un controlador estará allí para hacer el trabajo para todos los elementos insertados dinámicamente.

Actualización: ya que podemos usar el siguiente enfoque para crear un elemento dinámico

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    'size': '30'
}).appendTo("body");

Pero el sizeatributo no puede establecerse usando este enfoque usando jQuery-1.8.0o más tarde y aquí hay un informe de error antiguo , mire este ejemplo usando jQuery-1.7.2que muestra que el sizeatributo está configurado para 30usar el ejemplo anterior pero usando el mismo enfoque que no podemos establecer sizeusando el atributo jQuery-1.8.3, aquí es un violín que no funciona . Entonces, para establecer elsize atributo, podemos usar el siguiente enfoque

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    attr: { size: "30" }
}).appendTo("body");

O este

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");

Podemos pasar attr/propcomo un objeto hijo, pero funciona en jQuery-1.8.0 and laterversiones, consulte este ejemplo pero no funcionará en jQuery-1.7.2 or earlier(no probado en todas las versiones anteriores).

Por cierto, tomado del jQueryinforme de error

Hay varias soluciones Lo primero es no usarlo en absoluto, ya que no le ahorra espacio y esto mejora la claridad del código:

Aconsejaron utilizar el siguiente enfoque ( funciona también en los anteriores , probado en 1.6.4)

$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");

Entonces, es mejor usar este enfoque, OMI. Esta actualización se realiza después de leer / encontrar esta respuesta y en esta respuesta muestra que si usa en 'Size'(capital S)lugar de 'size'eso, funcionará bien , incluso enversion-2.0.2

$('<input>', {
    'type' : 'text',
    'Size' : '50', // size won't work
    'autofocus' : 'true'
}).appendTo('body');

Lea también sobre el accesorio , porque hay una diferencia, Attributes vs. Propertiesvaría según las versiones.

En realidad, si lo estás haciendo $('<div>'), jQuery también usarádocument.createElement() .

(Solo eche un vistazo a la línea 117 ).

Hay cierta sobrecarga de llamadas a funciones, pero a menos que el rendimiento sea crítico (está creando cientos [miles] de elementos), no hay muchas razones para volver a DOM simple .

Simplemente crear elementos para una nueva página web es probablemente un caso en el que mejor se adhiera a la forma jQuery de hacer las cosas.

Si tiene una gran cantidad de contenido HTML (más que un solo div), puede considerar construir el HTML en la página dentro de un contenedor oculto, luego actualizarlo y hacerlo visible cuando sea necesario. De esta forma, una gran parte de su marcado puede ser analizado previamente por el navegador y evitar que JavaScript se atasque cuando se lo llama. ¡Espero que esto ayude!

Esta no es la respuesta correcta para la pregunta, pero aún así me gustaría compartir esto ...

Usar solo document.createElement('div')y omitir JQuery mejorará mucho el rendimiento cuando quieras crear muchos elementos sobre la marcha y agregarlos a DOM.

Creo que está utilizando el mejor método, aunque podría optimizarlo para:

 $("<div/>");

No necesita un rendimiento bruto de una operación que realizará con muy poca frecuencia desde el punto de vista de la CPU.

Tendrá que comprender que la importancia del rendimiento de creación de elementos es irrelevante en el contexto del uso de jQuery en primer lugar.

Tenga en cuenta que no hay un propósito real de crear un elemento a menos que realmente lo vaya a usar.

Es posible que tenga la tentación de probar el rendimiento algo así como $(document.createElement('div'))vs $('<div>')y obtener grandes ganancias de rendimiento al usar$(document.createElement('div')) pero ese es solo un elemento que aún no está en el DOM.

Sin embargo, al final del día, querrá usar el elemento de todos modos, por lo que la prueba real debe incluir f.ex. .appendTo ();

A ver, si pruebas lo siguiente uno contra el otro:

var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');

Notará que los resultados variarán. A veces, una forma es mejor que la otra. Y esto es solo porque la cantidad de tareas en segundo plano en su computadora cambia con el tiempo.

Ponte a prueba aquí

Por lo tanto, al final del día, desea elegir la forma más pequeña y más fácil de crear un elemento. De esa manera, al menos, sus archivos de script serán lo más pequeños posible. Probablemente sea un factor más significativo en el punto de rendimiento que la forma de crear un elemento antes de usarlo en el DOM.

Alguien ya ha hecho un punto de referencia: jQuery document.createElement equivalente?

$(document.createElement('div')) Es el gran ganador.

Un punto es que puede ser más fácil de hacer:

$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")

Luego hacer todo eso con llamadas jquery.

Estoy usando jquery.min v2.0.3. Es mejor para mí usar lo siguiente:

var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);

de la siguiente manera:

var select = jQuery("#selecter");
jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select);

El tiempo de procesamiento del primer código es mucho menor que el segundo código.