Búsqueda de sitios web

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

Recientemente he estado haciendo muchas ventanas emergentes modales y cosas por el estilo, para lo cual utilicé jQuery. El método que usé para crear los nuevos elementos en la página ha sido en su mayoría del tipo de:

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

Sin embargo, estoy teniendo la sensación de que este no es el mejor ni el método más eficiente para hacer esto. ¿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.

Respuesta #1

Uso $ (document.createElement('div')); Las pruebas de rendimiento muestran que esta técnica es la más rápida. Especulo que esto se debe a que jQuery no tiene que identificarlo como un elemento y crear el elemento por sí mismo.

Realmente deberías ejecutar pruebas comparativas con diferentes motores de Javascript y evaluar a tu audiencia con los resultados. Toma una decisión a partir de ahí.

Respuesta #2

personalmente sugeriría (para la legibilidad):

$('<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

Respuesta #3

Pregunta:

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

Respuesta :

Dado que se trata de jQuery, entonces creo que es mejor usar este enfoque (limpio) (que estás usando)

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

DEMO.

De esta manera, incluso puedes 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');

DEMO.

Pero cuando estás tratando con muchos elementos dinámicos, deberías evitar agregar manejadores de eventos en un elemento en particular; en su lugar, deberías usar un manejador 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');
}

DEMO.

Entonces, si creas y agregas cientos de elementos con la misma clase, es decir (myClass), se consumirá menos memoria para el manejo de eventos, porque solo habrá un manejador 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 atributo size no se puede establecer usando este enfoque con jQuery-1.8.0 o posterior, y aquí hay un informe de error antiguo, mira este ejemplo usando jQuery-1.7.2 que muestra que el atributo size se establece en 30 usando el ejemplo anterior, pero usando el mismo enfoque no podemos establecer el atributo size usando jQuery-1.8.3, aquí hay un fiddle que no funciona. Entonces, para establecer el atributo size, 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/prop como un objeto hijo, pero funciona en versiones jQuery-1.8.0 y posteriores, revisa este ejemplo, pero no funcionará en jQuery-1.7.2 o anteriores (no probado en todas las versiones anteriores).

Por cierto, tomado del informe de errores de jQuery

Hay varias soluciones. La primera es no usarlo en absoluto, ya que no te ahorra espacio y esto mejora la claridad del código:

Aconsejaron usar el siguiente enfoque (funciona en versiones anteriores también, probado en 1.6.4)

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

Entonces, es mejor usar este enfoque, en mi opinión. Esta actualización se hizo después de que leí/encontré esta respuesta y en esta respuesta se muestra que si usas 'Size' (S mayúscula) en lugar de 'size', entonces funcionará bien, incluso en versión-2.0.2

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

También lee sobre prop, porque hay una diferencia, Attributes vs. Properties, varía según las versiones.

Respuesta #4

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

(Solo mira la línea 117).

Hay cierta sobrecarga por llamadas a funciones, pero a menos que el rendimiento sea crítico (estés creando cientos [miles] de elementos), no hay mucha razón para volver al DOM simple.

Simplemente crear elementos para una nueva página web probablemente sea un caso en el que lo mejor sea ceñirse a la manera de hacer las cosas de jQuery.

Respuesta #5

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 al DOM.

Respuesta #6

Si tienes mucho contenido HTML (más que un solo div), podrías considerar construir el HTML dentro de la página dentro de un contenedor oculto, luego actualizarlo y hacerlo visible cuando sea necesario. De esta manera, una gran parte de tu marcado puede ser pre-analizada por el navegador y evitar que JavaScript se vuelva lento al ser llamado. ¡Espero que esto ayude!

Respuesta #7

Creo que estás usando el mejor método, aunque podrías optimizarlo para:

 $("<div/>");

Respuesta #8

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

Artículos relacionados