Lire, calculer et écrire des données sur une table volumineuse avec jQuery - javascript, jquery, performance, table html, profiling

J'ai une immense table (jusqu'à 10 000 lignes). Je dois parcourir chaque ligne, calculer certaines données et les écrire sur deux cellules de chaque ligne.

Je fais quelque chose de similaire à:

$("#table tbody").find("tr:visible").each(function() {
var tr = $(this);
var a = tr.children(".cell3").text();
tr.children(".cell4").html(xxx.calculate(parseFloat(tr.children(".cell1").text()), a, b ));
tr.children(".cell5").html(xxx.calculate(parseFloat(tr.children(".cell2").text()), a, b));
});

et je vois, le profilage, c'est là que la plupart du temps est consacré au calcul.

• J'ai essayé de mettre en cache tous les enfants (var tds tr.children (". Cell1, .cell2, .cell3")) puis d'utiliser tds.get () pour récupérer les valeurs.

• J'ai essayé d'utiliser la méthode native innerHTML js

Mais je n'ai eu aucune amélioration significative.

Avez-vous des conseils ou voyez-vous quelque chose de pauvre dans mon code? Est-ce le mieux que je puisse obtenir?

PS: les cellules peuvent être dans un ordre différent, donc je dois y accéder via le nom de la classe

Réponses:

10000 lignes sont beaucoup à parcourir, pour un certain gain, essayez d'utiliser autant que possible la méthode native.

quelques suggestions rapides, je ne sais pas si cela entraînera un gain énorme mais devrait être relativement rapide:

1. Utilisez une boucle simple, avec une longueur en cache

10000 lignes à boucler sont le meilleur cas de test pour vérifier la différence de performances entre $ .each vs plain for loop.

var items = $("#table tbody").find("tr:visible");

var length = items.length;
for(var i = 0; i< length; i++)
{

var tr = $(items[i]);
var a = tr.children(".cell3").text();
tr.children(".cell4").html(xxx.calculate(parseFloat(tr.children(".cell1").text()), a, b ));
tr.children(".cell5").html(xxx.calculate(parseFloat(tr.children(".cell2").text()), a, b));
}

2. Utilisez find () au lieu de children (), cochez jsperf ici

var items = $("#table tbody").find("tr:visible");

var length = items.length;
for(var i = 0; i< length; i++)
{

var tr = $(items[i]);
var a = tr.find(".cell3").text();
tr.find(".cell4").html(xxx.calculate(parseFloat(tr.find(".cell1").text()), a, b ));
tr.find(".cell5").html(xxx.calculate(parseFloat(tr.find(".cell2").text()), a, b));
}