Comment puis-je optimiser javascript création / insertion de la ligne table?

voix
1

J'utilise jQuery. Je fonction de site Web qui fait une recherche ajax et renvoie un résultat JSON. Le rappel ajax renseigne ensuite les lignes d'une table avec les résultats. En général, il y a 100 lignes par recherche qui s'ENFONCÉES. Chaque ligne a une bonne quantité de données.

Le code ressemble à ceci (très abrégée):

function search() {

  $.post(/search.php, { params: search_params }, searchDone, json);

}

function searchDone(json) {

    var $table = $(#result_table);
    var html = ;
    for(i=0; i < json.results.length; i++) {

       html += rowHtml(results[i]);

    }

    $table.append(html);

}

function rowHtml(result) { /* much simplified version */

  var html = <tr><td>;
  html += result.field1;
  html += </td><td>;
  html += result.field2;
  html += </td></tr>;
  return html;

}

La performance est lente. Le navigateur a tendance à se bloquer lorsque le html est ajouté à la table.

Des conseils sur la façon d'optimiser ce? Serait-il préférable pour moi de créer les nœuds dom plutôt que d'essayer d'obtenir jQuery pour rendre le HTML?

Créé 26/08/2009 à 22:22
source utilisateur
Dans d'autres langues...                            


7 réponses

voix
4

Vous pouvez essayer de pousser à un tableau, puis ajouter à l'aide Array.join.

Etes-vous toujours à la Annexer des table? Sinon, vous devez envelopper toutes les lignes dans un tbody puis remplacer le noeud tbody existant. Ceci est plus rapide car il est vraiment un seul append plutôt que x.

METTRE À JOUR

Perf teste ici par M. Padolsey

Créé 26/08/2009 à 22:33
source utilisateur

voix
0

Il pourrait y avoir quelques conseils ici:

jQuery et en ajoutant de grandes quantités de HTML

Dans l'ensemble, il semble que l'utilisation Array.join vs concaténation de chaîne pour une augmentation de la vitesse est un mythe qui a été dissipés - ou devrais-je dire que dans les versions antérieures des navigateurs, oui, Array.join était plus rapide. Mais les versions récentes des navigateurs ont grandement optimisé concaténation String.

Créé 26/08/2009 à 22:44
source utilisateur

voix
0

Vous pouvez utiliser setTimeout au lieu d'une boucle. Il ne se verrouille pas le navigateur quand il construit la longue chaîne HTML. Vous pouvez également essayer de l'ajouter comme toute tbody au lieu de simplement les lignes.

Créé 26/08/2009 à 22:47
source utilisateur

voix
1

Mettre tout le code HTML à la fois au lieu de compter sur l'insertion DOM.

function searchDone(json) {
    var $table = $("#result_table");
    var html = $table.html();
    for(i=0; i < json.results.length; i++) {
       html += rowHtml(results[i]);
    }
    $table.html($table.html() + html);
}
Créé 26/08/2009 à 22:53
source utilisateur

voix
0

Vous devez également utiliser la version plus rapide de 'pour' boucle comme: var $ table = $ ( "# RESULT_TABLE"); var html = "";

for(var i=0, var len= json.results.length; i < ; i++) {

  // etc...

}
Créé 26/08/2009 à 23:48
source utilisateur

voix
2

jQuery prend toutes les <tr>« s dans votre chaîne html et les crée en tant que noeuds DOM (rapide), les annexant un par un (lent).

Essayez d' utiliser un seul <tbody>pour tenir vos lignes, alors que jQuery doit ajouter 1 élément à la table:

var html = ["<tbody>"];
for(i=0, len=json.results.length; i < len; i++) {

   html.push(rowHtml(json.results[i]));

}
html.push("</tbody>");
$table.append(html.join(''));

Comme vous pouvez le voir , je l'ai fait aussi quelques autres micro-optimisations: mettre en cache la .lengthpropriété dans la boucle, et utiliser un tableau comme un tampon de chaîne . Ils ne vous gagnez pas beaucoup , mais méritent d'être connus.

Créé 26/08/2009 à 23:56
source utilisateur

voix
0

Un peu hors sujet, mais je l' utilise et recommande Rocks Javascript . Ce livre contient une TONNE de conseils impressionnant d'optimisation JS par le créateur de Scriptaculous. Est également livré avec un outil appelé monstre DOM qui aide à traquer les goulots d' étranglement de performance - c'est un compliment génial de Firebug comme il suit en fait à travers les DOM à la recherche d'inefficacité basées sur des heuristiques et de la complexité DOM.

Créé 26/08/2009 à 23:59
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more