jQuery et d'ajouter de grandes quantités de HTML

Question

Je suis venu à trouver que l'utilisation de jQuery pour créer HTML côté client peut être un énorme booster de performance si elle est faite correctement. J'utilise AJAX renvoyant JSON pour récupérer du contenu dynamique, puis je compile le code HTML approprié et l'insère en utilisant jQuery. La première fois que j'ai manipulé cette technique, j'ai trouvé que le concaténateur de chaînes dans le JavaScript d'IE fonctionnait très lentement, de sorte que la construction d'une table dynamique avec plus de 50 lignes était terriblement performante. Puis j'ai trouvé une technique pour la concaténation de chaînes qui a tout changé. Au lieu d'utiliser l'opérateur dièse += utiliser des tableaux pour faire concaténation;

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('')); 

J'ai constaté que les performances se sont améliorées de manière significative. Maintenant, cependant, il y a un plafond d'environ 100 lignes avant que je commence à voir le navigateur lui-même lutter avec l'insertion dynamique autant de contenu à la fois. Est-ce que quelqu'un a des pointeurs ou des techniques qui peuvent être utilisés pour m'aider à atteindre la prochaine amélioration des performances pour de grands ensembles de HTML dynamique?

Answer 1

Vous obtiendrez probablement de meilleures performances si vous effectuez la génération HTML côté serveur, puis utilisez Ajax pour récupérer le code HTML et l'ajouter à votre DOM. (Je suppose que vous obtenez toutes les données du serveur en utilisant Ajax de toute façon.)

Answer 2

Avez-vous envisagé d'utiliser une bibliothèque de modèles? PURE a de très bonnes performances, par exemple (essayez l'exemple de 500 lignes).

Answer 3

Je plaisantais avec l'ajout de grandes quantités de html hier. Je pense que le rendu sur côté serveur et d'insertion est le chemin à parcourir, aussi je peux ajouter, que ne pas utiliser jquery est plus rapide par 50-100ms dans mes tests, qui sont ici:

http://programmingdrunk.com/playground

vous devez activer la console firebug pour voir les résultats de vitesse

Answer 4

Sachez que souvent le goulot d'étranglement de vitesse ne crée pas le DOM, mais en insérant le DOM. Cela est particulièrement vrai sur IE avec des feuilles de style compliquées et lorsque le nouveau contenu contient plusieurs niveaux de balises imbriquées.

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

Answer 5

Essayez le clonage des parties du DOM lui-même plutôt que de générer à la volée (à savoir ajouter DOMElements réels de sorte qu'ils ne doivent pas être créés).

Answer 6

Chase a raison, peu importe à quelle vitesse vous pouvez générer le code HTML via JavaScript, c'est l'insertion DOM qui va vous tuer. Attachez n'importe quel langage de programmation avec le DOM et ça va être lent.

Mon seul conseil est de faire paginer la table pour ne pas en charger autant en même temps, ou peut-être ne pas utiliser AJAX du tout.

Answer 7

Il existe un problème de performance avec jQuery et l'insertion d'une grande chaîne de caractères html dans le DOM, en raison de sa fonction $ .trim.

Je trouve parfois des scripts old dom bien plus rapides qu'avec jquery. Essayez quelque chose comme

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

Answer 8

Dans mon cas, document.getElementById ('id'). InnerHTML = myarray.join ('') est aussi un tueur depuis tableau ont 10 chaînes de Html.Les jointures créeraient une grande chaîne longue et les performances de nnerHTML varieraient significativement entre 100ms et 1200ms sur IE 7.

?

Answer 9

Je pense que vous pouvez diviser le HTML en plusieurs parties et l'ajouter un par un.

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

comme des lignes de documents dans GoogleDocs