jQuery y anexar grandes cantidades de HTML

Question

He descubierto que usar jQuery para crear HTML en el lado del cliente puede ser un gran refuerzo si se hace correctamente. Uso AJAX devolviendo JSON para recuperar contenido dinámico y luego construyo el HTML relevante y lo inserto usando jQuery. La primera vez que metí la pata con esta técnica, descubrí que el concatenador de cuerdas del JavaScript de IE funcionaba muy lentamente, por lo que crear una tabla dinámica con más de 50 filas funcionaba terriblemente.

var shtml = '<table>'; 
for (var i = 0; i < 100; i++) { 
    shtml += '<tr><td>A bunch of content</td></tr>'; 
} 
shtml += '</table>'; 
$('#myTable').append(shtml); 

Luego encontré una técnica para la concatenación de cadenas que lo cambió todo. En lugar de utilizar las matrices de uso picadura += operador de concatenación de hacer;

var shtml = ['<table>']; 
for (var i = 0; i < 100; i++) { 
    shtml.push('<tr><td>A bunch of content</td></tr>'); 
} 
shtml.push('</table>'); 
$('#myTable').append(shtml.join('')); 

Encontré que el rendimiento mejoró significativamente. Ahora, sin embargo, hay un techo de aproximadamente 100 filas antes de comenzar a ver que el navegador en sí tiene problemas para insertar dinámicamente tanto contenido a la vez. ¿Alguien tiene alguna sugerencia o técnica que pueda usarse para ayudarme a lograr el siguiente impulso de rendimiento para grandes conjuntos de HTML dinámico?

Answer 1

Probablemente obtendrás un mejor rendimiento si haces la generación de HTML en el lado del servidor, y luego usas Ajax para recuperar el html y anexarlo a tu DOM. (Estoy asumiendo que está recibiendo todos los datos desde el servidor mediante el Ajax de todos modos.)

Answer 2

Ha considerado el uso de una biblioteca de plantillas? PURE tiene muy buen rendimiento, por ejemplo (pruebe el ejemplo de 500 filas).

Answer 3

yo estaba jugando con añadiendo grandes cantidades de HTML ayer. Creo Procesamiento de color en el lado del servidor y la inserción es el camino a seguir, también puedo añadir, que no usar jQuery es más rápido por 50-100ms en mis pruebas, que se encuentra aquí:

http://programmingdrunk.com/playground

necesitará habilitar la consola Firebug para ver los resultados de velocidad

Answer 4

Tenga en cuenta que a menudo el cuello de botella de velocidad no está creando el DOM, pero insertando el DOM. Esto es especialmente cierto en IE con hojas de estilo complicadas y cuando el nuevo contenido contiene muchos niveles de etiquetas anidadas.

Ver: http://bitkickers.blogspot.com/2008/12/ajax-grid-performance-in-ie.html

Answer 5

Trate clonación de partes de la misma DOM en lugar de generar sobre la marcha (es decir, añadir DOMElements reales por lo que no tienen que ser creados).

Answer 6

Chase tiene razón, no importa qué tan rápido pueda generar el código HTML a través de JavaScript, es la inserción del DOM lo que lo matará. Ate cualquier lenguaje de programación con el DOM y será lento.

Mi única sugerir es haber paginado la mesa para que no se cargue tantos a la vez, o tal vez no utilizar AJAX en absoluto.

Answer 7

Hay un problema de rendimiento con jQuery y la inserción de una gran serie de html en el DOM, debido a su función $ .trim.

A veces encuentro el simple dom old scripting mucho más rápido que el uso de jquery. Pruebe algo como

document.getElementById('id').innerHTML = myarray.join('') 

Answer 8

En mi caso, document.getElementById ('id'). InnerHTML = myarray.join ('') es también un asesino en serie ya tiene 10 cuerdas HTML.Las uniones crearía una cadena larga grande y el rendimiento nnerHTML varía significativamente entre 100 ms a 1200ms en IE 7.

cualquier cluses?

Answer 9

Creo que se puede dividir en muchas partes del HTML y añadir uno por uno.

$("table tr:last").after('<tr>...</tr>');

Al igual que las líneas del documento en Google Docs