jQuery et en ajoutant de grandes quantités de HTML
J'ai fini par trouver que l'utilisation de jQuery pour créer le HTML côté client peut être un énorme performance de rappel si c'est fait correctement. J'utilise AJAX retour JSON pour récupérer le contenu dynamique et puis je acquérir le HTML et insérez-la à l'aide de jQuery. La première fois que j'ai foiré avec cette technique, j'ai trouvé que la chaîne concatenator dans IE du JavaScript exécuté vraiment lentement, de sorte que la construction d'un tableau dynamique avec plus de 50 lignes effectué terriblement.
var shtml = '<table>';
for (var i = 0; i < 100; i++) {
shtml += '<tr><td>A bunch of content</td></tr>';
}
shtml += '</table>';
$('#myTable').append(shtml);
Puis j'ai trouvé une technique pour la concaténation de chaîne qui a tout changé. Au lieu d'utiliser la piqûre +=
opérateur d'utiliser des tableaux pour faire de la 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 trouvé que la performance s'est améliorée de manière significative. Maintenant, cependant, il ya un plafond d'environ 100 lignes avant que je commence à voir le navigateur lui-même en lutte avec l'insertion dynamique d'autant de contenu à la fois. Quelqu'un aurait-il une quelconque des pointeurs ou des techniques qui peuvent être utilisées pour m'aider à atteindre le prochain boost de performance pour les grands ensembles de HTML dynamique?
OriginalL'auteur MonkeyBrother | 2009-02-26
Vous devez vous connecter pour publier un commentaire.
Il y a un problème de performance avec jQuery et l'insertion d'une grande chaîne de html vers les DOM, en raison de son $.la fonction trim.
Je trouve parfois un bon vieux dom scripting beaucoup plus rapide que l'utilisation de jquery. Essayez quelque chose comme
OriginalL'auteur Nicolas R
Être conscient que souvent le goulot d'étranglement de vitesse n'est pas la création du DOM, mais insertion les DOM. Cela est particulièrement vrai sur IE compliquée avec les feuilles de style et quand le nouveau contenu contient beaucoup de niveaux d'imbrication des balises.
Voir: http://bitkickers.blogspot.com/2008/12/ajax-grid-performance-in-ie.html
OriginalL'auteur Chase Seibert
Avez-vous envisagé d'utiliser une bibliothèque de templates? PURE a de très bonnes performances, par exemple (essayez les 500 ligne exemple).
OriginalL'auteur Dave Ward
Je pense que vous pouvez diviser html en plusieurs parties et de les ajouter un par un.
$("table tr:last").after('<tr>...</tr>');
Comme les lignes du document dans googleDocs
OriginalL'auteur Just Me
Essayer de clonage parties du DOM lui-même plutôt que de le créer à la volée (c'est à dire ajouter réelle DOMElements de sorte qu'ils n'ont pas à être créé).
OriginalL'auteur Matt Gardner
j'ai été déconner avec ajout de grandes quantités de html hier. je pense que le rendu sur le côté serveur et l'insertion est le chemin à parcourir, aussi, et je dois ajouter, que ne pas utiliser jquery est plus rapide de 50 à 100 ms dans mes tests, qui sont ici:
http://programmingdrunk.com/playground
vous devez activer la console de firebug pour voir la vitesse de résultats
OriginalL'auteur mkoryak
Chase est droit, il n'a pas d'importance à quelle vitesse vous pouvez générer le code HTML via JavaScript, le DOM d'insertion qui va vous tuer. Cravate tout langage de programmation avec DOM et ça va être lent.
Mon seul suggère, c'est d'avoir le tableau paginé de sorte que vous n'avez pas de charge donc plusieurs à la fois, ou peut-être de ne pas utiliser AJAX.
OriginalL'auteur jay_soo
Dans mon cas,document.getElementById('id').innerHTML = montableau.join(") est aussi un tueur depuis le tableau 10 chaînes HTMl. Les jointures serait de créer une grande chaîne longue et nnerHTML rendement varie de manière significative entre 100ms à 1200ms sur IE 7.
tout cluses?
OriginalL'auteur
Vous auriez probablement obtenir de meilleures performances si vous ne la génération HTML côté serveur, et ensuite utiliser Ajax pour récupérer le code html et l'ajouter à votre DOM. (Je suis en supposant que vous êtes l'obtention de toutes les données à partir du serveur à l'aide d'Ajax, de toute façon.)
Dépend de la façon dont vous l'ajouter. innerHTML est assez rapide.
OriginalL'auteur davogones