Bonjour,
pour une question de performances,
j'ai simplifié au maximum (?) un script que
j'ai écrit ( tri multi-colonnes d'un tableau HTML ),
il doit être compatible Internet Explorer
et FireFox ( pour les autres ??? ), ça marche mais,
pour trier ~2000 lignes : 18' avec IE, 55' avec FF.
je commet sûrement une connerie, mais où ?
<html>
<head>
<style type="text/css">
table,td { border:1px solid #000000;
font-weight:bold; }
</style>
<title>Tri simplifié d'un tableau html</title>
<script type="text/javascript">
function trier(tableau,Zone)
{ var ligfin=tableau.rows.length; // nbr lignes
var buffer=Array(ligfin); // buffer[nbr lignes]
var c,l;
var dj=new Date();
window.status=">> Début "+dj.getHours()+
":"+dj.getMinutes()+
":"+dj.getSeconds()+" >>";
/* table => array */
for ( l=0; l<ligfin; l++ )
{ buffer[l]=new Array();
buffer[l][0]+=tableau.rows[l].cells[Zone].innerHTML;
for ( c=0;c<3;c++ )
{ buffer[l][c+1]=
tableau.rows[l].cells[c].innerHTML; } }
/* tri */
buffer.sort();
/* array => table */
for ( l=0;l<ligfin;l++ )
{ for ( c=0;c<3;c++)
{ tableau.rows[l].cells[c].innerHTML=
buffer[l][c+1]; } }
var dj=new Date();
window.status+=" << Fin "+dj.getHours()+
":"+dj.getMinutes()+
":"+dj.getSeconds()+" <<"; }
</script>
</head>
<body>
<button name="tri"
id="tri"
style="display:none"
onclick="trier(atrier,1);">Trier</button><br/>
<table name="atrier"
id="atrier">
<tr><td>55</td> <td>alain</td> <td>23/01/2005</td></tr>
<tr><td>1</td> <td>daniel</td> <td>03/03/2001</td></tr>
<tr><td>3</td> <td>etienne</td><td>01/01/2005</td></tr>
<tr><td>4444</td><td>bernard</td><td>23/11/2004</td></tr>
<tr><td>22</td> <td>claude</td> <td>08/09/1999</td></tr>
<tr><td>1</td> <td>fernand</td><td>17/02/2000</td></tr>
<tr><td>1</td> <td>etienne</td><td>03/03/2001</td></tr>
<tr><td>4444</td><td>etienne</td><td>23/01/2000</td></tr>
<script type="text/javascript">
/* Initialisation :
Créer 2000 Lignes aléatoires */
var tmp="abcdefghijklmnopqrstuvwxyz"+
"ABCDEFGHIJKLMNOPQRSTUVWXYZ"+
"0123456789";
var alea,t="";
for ( var n=0;n<2000;n++)
{ alea=Math.floor(Math.random()*tmp.length);
window.status=n+" ~ "+alea;
t+="<tr><td>"+tmp.charAt(alea)+"-0</td>"+
"<td>"+tmp.charAt(alea)+"-1</td>"+
"<td>"+tmp.charAt(alea)+"-2</td></tr>"; }
document.writeln(t);
document.getElementById("tri").style.display="inline";
</script>
</table>
</body></html>
toutes les suggestions pour un
meilleur temps de réponse de FF,
mais aussi de IE, sont les bienvenues.
merci d'avance.
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Jul
Bonjour, pour une question de performances, j'ai simplifié au maximum (?) un script que j'ai écrit ( tri multi-colonnes d'un tableau HTML ), il doit être compatible Internet Explorer et FireFox ( pour les autres ??? ), ça marche mais, pour trier ~2000 lignes : 18' avec IE, 55' avec FF. je commet sûrement une connerie, mais où ?
[...]
toutes les suggestions pour un meilleur temps de réponse de FF, mais aussi de IE, sont les bienvenues. merci d'avance.
Cordialement. Bul.
Bonjour,
Avec un tableau d'autant de ligne, celà a de quoi être long ! Essayez : 1- Enregistrez dans un tableau temporaire les données du champ concerné (si le champ est long et les éléments significatifs courts, coupez la chaîne qui servira de support de tri autant que vous le pouvez) ainsi que l'index de la ligne. 2- Triez ce tableau temporaire 3- Réorganisez le tableau par lui-même avec les méthode DOM insertChild et removeChild en prenant soin de recalculer les index des lignes car il risque d'y avoir du mouvement :o) 3-bis Si vous préférez ne pas vous embêter avec les calculs des index de lignes, vous pouvez dupliquer le noeud DOM et l'ajouter à la fin du tableau et retirer toutes les premières occurences en fin de traitement. Mais je crains que celà ne soit une tâche lourde avec le nombre de lignes proposé.
-- Jul... réapparru comme par enchantement
Bonjour,
pour une question de performances,
j'ai simplifié au maximum (?) un script que
j'ai écrit ( tri multi-colonnes d'un tableau HTML ),
il doit être compatible Internet Explorer
et FireFox ( pour les autres ??? ), ça marche mais,
pour trier ~2000 lignes : 18' avec IE, 55' avec FF.
je commet sûrement une connerie, mais où ?
[...]
toutes les suggestions pour un
meilleur temps de réponse de FF,
mais aussi de IE, sont les bienvenues.
merci d'avance.
Cordialement. Bul.
Bonjour,
Avec un tableau d'autant de ligne, celà a de quoi être long ! Essayez :
1- Enregistrez dans un tableau temporaire les données du champ concerné
(si le champ est long et les éléments significatifs courts, coupez la
chaîne qui servira de support de tri autant que vous le pouvez) ainsi
que l'index de la ligne.
2- Triez ce tableau temporaire
3- Réorganisez le tableau par lui-même avec les méthode DOM insertChild
et removeChild en prenant soin de recalculer les index des lignes car
il risque d'y avoir du mouvement :o)
3-bis Si vous préférez ne pas vous embêter avec les calculs des index
de lignes, vous pouvez dupliquer le noeud DOM et l'ajouter à la fin du
tableau et retirer toutes les premières occurences en fin de
traitement. Mais je crains que celà ne soit une tâche lourde avec le
nombre de lignes proposé.
Bonjour, pour une question de performances, j'ai simplifié au maximum (?) un script que j'ai écrit ( tri multi-colonnes d'un tableau HTML ), il doit être compatible Internet Explorer et FireFox ( pour les autres ??? ), ça marche mais, pour trier ~2000 lignes : 18' avec IE, 55' avec FF. je commet sûrement une connerie, mais où ?
[...]
toutes les suggestions pour un meilleur temps de réponse de FF, mais aussi de IE, sont les bienvenues. merci d'avance.
Cordialement. Bul.
Bonjour,
Avec un tableau d'autant de ligne, celà a de quoi être long ! Essayez : 1- Enregistrez dans un tableau temporaire les données du champ concerné (si le champ est long et les éléments significatifs courts, coupez la chaîne qui servira de support de tri autant que vous le pouvez) ainsi que l'index de la ligne. 2- Triez ce tableau temporaire 3- Réorganisez le tableau par lui-même avec les méthode DOM insertChild et removeChild en prenant soin de recalculer les index des lignes car il risque d'y avoir du mouvement :o) 3-bis Si vous préférez ne pas vous embêter avec les calculs des index de lignes, vous pouvez dupliquer le noeud DOM et l'ajouter à la fin du tableau et retirer toutes les premières occurences en fin de traitement. Mais je crains que celà ne soit une tâche lourde avec le nombre de lignes proposé.
-- Jul... réapparru comme par enchantement
Bul
merci de votre réponse Jul, pas tout compris ( suis un peu beubeu ... )
Enregistrez dans un tableau temporaire les données du champ concerné vous me proposez de créer un tableau qui
ne contient que le champ de tri, et trier celui ci ? mais comment retrouver la ligne correspondante pour les données associées une fois le tri fait ? et ce sera plus rapide ? ou "j'ai pas compris", c'est probable.
insertChild et removeChild donc d'abord détruire le tableau
et vous pensez que cela sera (nettement) plus rapide que de remettre les lignes/colonnes ? loin d'être convaincu, mais peut-être ? ou "j'ai toujours pas compris", ce qui est probable.
Mais je crains que cela ne soit une tâche lourde avec le nombre de lignes proposé je le crains aussi, mais 55' avec FireFox :
c'est insupportable, 18' pour un langage comme javascript je veux bien ( si on ne peut mieux faire, enfin "autrement" ) gentil de passer du temps sur une question à la con. @+
merci de votre réponse Jul,
pas tout compris ( suis un peu beubeu ... )
Enregistrez dans un tableau temporaire les données
du champ concerné
vous me proposez de créer un tableau qui
ne contient que le champ de tri, et trier
celui ci ?
mais comment retrouver la ligne correspondante
pour les données associées une fois le tri fait ?
et ce sera plus rapide ?
ou "j'ai pas compris", c'est probable.
insertChild et removeChild
donc d'abord détruire le tableau
et vous pensez que cela sera (nettement) plus
rapide que de remettre les lignes/colonnes ?
loin d'être convaincu, mais peut-être ?
ou "j'ai toujours pas compris", ce qui est probable.
Mais je crains que cela ne soit une tâche
lourde avec le nombre de lignes proposé
je le crains aussi, mais 55' avec FireFox :
c'est insupportable, 18' pour un langage
comme javascript je veux bien ( si on ne
peut mieux faire, enfin "autrement" )
gentil de passer du temps sur
une question à la con. @+
merci de votre réponse Jul, pas tout compris ( suis un peu beubeu ... )
Enregistrez dans un tableau temporaire les données du champ concerné vous me proposez de créer un tableau qui
ne contient que le champ de tri, et trier celui ci ? mais comment retrouver la ligne correspondante pour les données associées une fois le tri fait ? et ce sera plus rapide ? ou "j'ai pas compris", c'est probable.
insertChild et removeChild donc d'abord détruire le tableau
et vous pensez que cela sera (nettement) plus rapide que de remettre les lignes/colonnes ? loin d'être convaincu, mais peut-être ? ou "j'ai toujours pas compris", ce qui est probable.
Mais je crains que cela ne soit une tâche lourde avec le nombre de lignes proposé je le crains aussi, mais 55' avec FireFox :
c'est insupportable, 18' pour un langage comme javascript je veux bien ( si on ne peut mieux faire, enfin "autrement" ) gentil de passer du temps sur une question à la con. @+
Jul
Bul a exposé le 01/08/2005 :
merci de votre réponse Jul, pas tout compris ( suis un peu beubeu ... )
Enregistrez dans un tableau temporaire les données du champ concerné
vous me proposez de créer un tableau qui ne contient que le champ de tri, et trier celui ci ? mais comment retrouver la ligne correspondante pour les données associées une fois le tri fait ? et ce sera plus rapide ? ou "j'ai pas compris", c'est probable.
insertChild et removeChild
donc d'abord détruire le tableau et vous pensez que cela sera (nettement) plus rapide que de remettre les lignes/colonnes ? loin d'être convaincu, mais peut-être ? ou "j'ai toujours pas compris", ce qui est probable.
Mais je crains que cela ne soit une tâche lourde avec le nombre de lignes proposé
je le crains aussi, mais 55' avec FireFox : c'est insupportable, 18' pour un langage comme javascript je veux bien ( si on ne peut mieux faire, enfin "autrement" ) gentil de passer du temps sur une question à la con. @+
En fait, passer du temps sur la question, ce serait programmer le 'ti bout de pcode qui roule tout seul, mais pour ça, j'ai la flême :-Þ
L'idée, c'est d'assigner un tableau (tableau = Array, pas un objet TABLE) à deux entrées ("chaine à comparer", "index dans le tableau"). -> une boucle for (une boucle for est assez coûteuse et il vaut mieux en limiter l'utilisation)
On tri le tableau par sa première entrée.
[Une alternative serait de coller l'index au derrière de la chaine à tester (par exmple rajouter '-index') puis de récupérer l'index par une regex qui sera précompilée pour la rapidité d'exécution. Ceci permet de créer un tableau à une entrée]
A ce moment là, nous avons le tableau temporaire qui contient l'ordre nouveau des index. La procédure qui doit suivre consiste à reconstruire le tabeau "de l'intérieur". C'est à dire qu'au lieu d'extraire et réinjecter des données "innerHTML" dont le coup de ressource n'est certainement pas annodin, on prend l'objet TR en entier que l'on déplace là où il faut. C'est l'objet de la deuxième et dernière boucle for. Pour ces opérations, vous avez besoin des méthodes de manipulation du DOM qui déplaceront les éléments sans vraiment les modifier.
Une petite note aussi : Si vous voulez voir à quel niveau votre script consomme beaucoup, répartissez le test de la durée sur les différents ensemble de votre script existant. Vous pourrez voir quelle opération est vraiment coûteuse et il sera plus facile de trouver une adaptation, moyennant d'autres tests.
-- Jul... réapparru comme par enchantement
Bul a exposé le 01/08/2005 :
merci de votre réponse Jul,
pas tout compris ( suis un peu beubeu ... )
Enregistrez dans un tableau temporaire les données
du champ concerné
vous me proposez de créer un tableau qui
ne contient que le champ de tri, et trier
celui ci ?
mais comment retrouver la ligne correspondante
pour les données associées une fois le tri fait ?
et ce sera plus rapide ?
ou "j'ai pas compris", c'est probable.
insertChild et removeChild
donc d'abord détruire le tableau
et vous pensez que cela sera (nettement) plus
rapide que de remettre les lignes/colonnes ?
loin d'être convaincu, mais peut-être ?
ou "j'ai toujours pas compris", ce qui est probable.
Mais je crains que cela ne soit une tâche
lourde avec le nombre de lignes proposé
je le crains aussi, mais 55' avec FireFox :
c'est insupportable, 18' pour un langage
comme javascript je veux bien ( si on ne
peut mieux faire, enfin "autrement" )
gentil de passer du temps sur
une question à la con. @+
En fait, passer du temps sur la question, ce serait programmer le 'ti
bout de pcode qui roule tout seul, mais pour ça, j'ai la flême :-Þ
L'idée, c'est d'assigner un tableau (tableau = Array, pas un objet
TABLE) à deux entrées ("chaine à comparer", "index dans le tableau").
-> une boucle for (une boucle for est assez coûteuse et il vaut mieux
en limiter l'utilisation)
On tri le tableau par sa première entrée.
[Une alternative serait de coller l'index au derrière de la chaine à
tester (par exmple rajouter '-index') puis de récupérer l'index par une
regex qui sera précompilée pour la rapidité d'exécution. Ceci permet de
créer un tableau à une entrée]
A ce moment là, nous avons le tableau temporaire qui contient l'ordre
nouveau des index.
La procédure qui doit suivre consiste à reconstruire le tabeau "de
l'intérieur". C'est à dire qu'au lieu d'extraire et réinjecter des
données "innerHTML" dont le coup de ressource n'est certainement pas
annodin, on prend l'objet TR en entier que l'on déplace là où il faut.
C'est l'objet de la deuxième et dernière boucle for. Pour ces
opérations, vous avez besoin des méthodes de manipulation du DOM qui
déplaceront les éléments sans vraiment les modifier.
Une petite note aussi :
Si vous voulez voir à quel niveau votre script consomme beaucoup,
répartissez le test de la durée sur les différents ensemble de votre
script existant. Vous pourrez voir quelle opération est vraiment
coûteuse et il sera plus facile de trouver une adaptation, moyennant
d'autres tests.
merci de votre réponse Jul, pas tout compris ( suis un peu beubeu ... )
Enregistrez dans un tableau temporaire les données du champ concerné
vous me proposez de créer un tableau qui ne contient que le champ de tri, et trier celui ci ? mais comment retrouver la ligne correspondante pour les données associées une fois le tri fait ? et ce sera plus rapide ? ou "j'ai pas compris", c'est probable.
insertChild et removeChild
donc d'abord détruire le tableau et vous pensez que cela sera (nettement) plus rapide que de remettre les lignes/colonnes ? loin d'être convaincu, mais peut-être ? ou "j'ai toujours pas compris", ce qui est probable.
Mais je crains que cela ne soit une tâche lourde avec le nombre de lignes proposé
je le crains aussi, mais 55' avec FireFox : c'est insupportable, 18' pour un langage comme javascript je veux bien ( si on ne peut mieux faire, enfin "autrement" ) gentil de passer du temps sur une question à la con. @+
En fait, passer du temps sur la question, ce serait programmer le 'ti bout de pcode qui roule tout seul, mais pour ça, j'ai la flême :-Þ
L'idée, c'est d'assigner un tableau (tableau = Array, pas un objet TABLE) à deux entrées ("chaine à comparer", "index dans le tableau"). -> une boucle for (une boucle for est assez coûteuse et il vaut mieux en limiter l'utilisation)
On tri le tableau par sa première entrée.
[Une alternative serait de coller l'index au derrière de la chaine à tester (par exmple rajouter '-index') puis de récupérer l'index par une regex qui sera précompilée pour la rapidité d'exécution. Ceci permet de créer un tableau à une entrée]
A ce moment là, nous avons le tableau temporaire qui contient l'ordre nouveau des index. La procédure qui doit suivre consiste à reconstruire le tabeau "de l'intérieur". C'est à dire qu'au lieu d'extraire et réinjecter des données "innerHTML" dont le coup de ressource n'est certainement pas annodin, on prend l'objet TR en entier que l'on déplace là où il faut. C'est l'objet de la deuxième et dernière boucle for. Pour ces opérations, vous avez besoin des méthodes de manipulation du DOM qui déplaceront les éléments sans vraiment les modifier.
Une petite note aussi : Si vous voulez voir à quel niveau votre script consomme beaucoup, répartissez le test de la durée sur les différents ensemble de votre script existant. Vous pourrez voir quelle opération est vraiment coûteuse et il sera plus facile de trouver une adaptation, moyennant d'autres tests.
-- Jul... réapparru comme par enchantement
Bul
merci de ces conseils, je vais bosser sur ça. j'ai déjà réduit le temps ( 11' au lieu des 19' ) en utilisant firstChild.nodeValue au lieu de innerHTML @+
merci de ces conseils, je vais bosser sur ça.
j'ai déjà réduit le temps ( 11' au lieu des 19' )
en utilisant firstChild.nodeValue au lieu de innerHTML
@+
merci de ces conseils, je vais bosser sur ça. j'ai déjà réduit le temps ( 11' au lieu des 19' ) en utilisant firstChild.nodeValue au lieu de innerHTML @+
