L'appendTo de JQuery est très lent!

Question

J'ai une table html que je réorganise en fonction d'une liste CSV de valeurs d'attributs personnalisés que j'ai pour chaque ligne de table. J'utilise la fonction suivante pour le faire:

for (var i = 0; i < arrCSV.length; i++) 
{ 
    $('#' + tableId) 
     .find('[fname = ' + arrCSV[i] + ']') 
     .eq(0) 
     .parents('tr') 
     .eq(0) 
     .appendTo('#' + tableId); 
} 

La structure de la table est:

<table> 
<tr> 
<td fname='f1'>something here</td> 
</tr> 
<tr> 
<td fname='f2'>something here</td> 
</tr> 
</table> 

Le CSV pourrait être quelque chose comme ça "f2, f1"

Je trouve cela est très fonction d'exécution très lente. Toute aide pour l'optimiser est vraiment appréciée.

EDIT: Sur la base de l'article à http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly, on peut obtenir le plus grand coup de pouce de la performance en appelant append une seule fois par la chaîne concaténée html. Est-ce que quelqu'un peut aider à utiliser cette technique pour mon problème? Je ne suis pas sûr de savoir comment obtenir le code HTML dans la boucle for et l'ajouter une fois.

Answer 1

Je suggère de trouver les éléments aussi peu de fois que possible. Stockez toutes les lignes correspondantes dans un "hachage" en utilisant la valeur d'attribut d'intérêt comme clé. Parcourez votre fichier CSV, sélectionnez la ligne correspondante dans le hachage, insérez-la dans un tableau, puis ajoutez les éléments du tableau à la table en utilisant l'objet jQuery précédemment trouvé.

var table = $('#' + tableId); 
var rowHash = {}; 
table.find('[fname]').each(function() { 
    rowHash[$(this).attr('fname')] = $(this).closest('tr'); 
}); 
var rows = []; 
for (var i = 0; i < arrCSV.length; ++i) 
{ 
    var row = rowHash[arrCSV[i]]; 
    if (row) { 
     rows.push(row); 
    } 
} 
$(rows).appendTo(table); 

EDIT: Cela semble être une légère amélioration à mon code précédent où je chaque ligne à AJOUT DE la table comme il a été trouvé. J'ai testé sur une table avec 1000 lignes et il semble prendre environ 1sec pour trier une table qui doit être complètement inversée.

Answer 2

Vous devrez peut-être repenser votre algorithme.

Sans changer l'algorithme, une légère optimisation serait:

var $table = $("#" + tableId); 

for (var i = 0; i < arrCSV.length; i++) 
{ 
    $('[fname = ' + arrCSV[i] + ']:first',$table).closest('tr').appendTo($table); 
} 

Answer 3

Attendez une seconde ...

$('#' + tableId) 

Get #myTable

.find('[fname = ' + arrCSV[i] + ']') 

Trouver quoi que ce soit avec un attribut de fname égal à i

.eq(0) 

Donnez-moi le premier élément de l'expression précédente

.parents('tr') 

Trouvez des parents de type TR

.eq(0) 

Donne-moi la première dans l'expression précédente

.appendTo('#' + tableId); 

Ajouter que TR à #myTable

Okay. Maintenant que je l'ai décomposé - dupliquez-vous une ligne de table seulement? Si oui, le .append() n'est pas votre problème, votre choix de sélecteurs est. Pour aggraver ma confusion ici, les seules étiquettes avec un attribut de fname sont vos TR, alors pourquoi allez-vous à leurs parents() et à la recherche du premier TR? Vous demandez essentiellement que les balises TR soient placées dans les balises TR - mais ce n'est pas ce que montre votre exemple de balisage.

Answer 4

Si vous voulez ajouter html une seule fois (comme cet article de learningjquery.com), essayez ce qui suit:

$(document).ready(
function() 
{ 
    var arrCSV = ['f2', 'f1']; 
    var tableId = 'mainTable'; 
    var newTable = []; 
    for (var i = 0; i < arrCSV.length; i++) 
    { 
     var row = $('#' + tableId) 
       .find('[fname = ' + arrCSV[i] + ']') 
       .eq(0) 
       .parents('tr') 
       .eq(0); 

     newTable.push(row.html()); 
    }      

    $('#' + tableId).html(newTable.join('')); 
}; 
}); 

Live version: http://jsbin.com/uwipo code: http://jsbin.com/uwipo/edit

Bien que je pense personnellement que vous devriez profile ton code en premier et regarde si c'est append qui est lent OU cet appel de méthode 'find'. Je pense que pour une table énorme, l'utilisation de 'find method' pour trouver un attribut personnalisé pourrait être lente. Mais encore une fois, il ne sert à rien de faire des conjectures, de profiler le code et de le découvrir.

Si la méthode 'find' est lente, il sera possible d'utiliser l'attribut id sur td au lieu de donner un attribut personnalisé.

par exemple.

<table> 
<tr> 
    <td id='f1'>something here</td> 
</tr> 
<tr> 
    <td id='f2'>something here</td> 
</tr> 
</table> 

ensuite votre code pour trouver la ligne mère pourrait être aussi simple que:

('#' + arrCsv[i]).parent('tr') 

EDIT: Comme indiqué par tvanfosson, ce code suppose que arrCSV contient attribut pour toutes les lignes. La table finale contiendra uniquement les lignes présentes dans arrCSV. En outre, ce code ne copie pas la section 'thead', 'tfoot' de la table d'origine, bien qu'il soit facile d'écrire du code qui le fait.