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?

Une observation: Dans votre exemple, vous êtes vraiment en montrant un coup de pouce de performance en raison de Javascript natif de tableaux et de chaînes de manutention, pas jQuery.

OriginalL'auteur MonkeyBrother | 2009-02-26