Comment accelerer javascript?

Marsh Posté le 09-05-2007 à 18:14:08

Bonjour.

J'ai fait un treeview genre celui la: http://www.treemenu.net/treeviewfi [...] Frame.html

Et je dois ajouter un bouton qui deroule en enroule tout d'un coup.

Ca marche mais c'est fort lent sur les grosses page HTML (25000 lignes de HTML) il me faut parfois jusque 5 sec pour derouler ou enrouler.
Evidement pas de prob sur les petites page

Quand on clique sur un + ou un moins, il y a un <DIV> dont je met le style.display a none ou block.
J'ai essayé de faire avec des ID unique pour chaque tag <DIV>. Mais le getElementById c'est hyper lent.
J'ai fait un document.all.tags('div');. Ca renvoie une liste avec tout les tag <DIV> de la page. Avec 200 bloques <DIV> l'arbre prend plus de 4 sec a se deplier.

Par exemple quand je met cette ligne dans ma boucle qui deroule tout en commentaire je gagne 2 3 sec.
Mais je peux pas l'enlever car j'ai besoin de d'encadrer.

Code :

div.parentNode.style.border='1px solid #C4C4C4';

Code :

function Toggle(div,etat)
{
var img = document.getElementById('img'+div.id.substring(3,div.id.length));
if((div.style.display=='none')&&(etat!=='close'))
{
oldDivColor=div.parentNode.style.backgroundColor;
div.parentNode.style.backgroundColor=div.style.backgroundColor;
div.parentNode.style.border='1px solid #C4C4C4';
img.src="./images/minus.gif";
div.style.display='block';
}
else if (etat!=='open')
{
div.parentNode.style.border='';
div.parentNode.style.backgroundColor=oldDivColor;
span=div.parentNode.getElementsByTagName('SPAN');
if(span[1].style.backgroundColor.indexOf('#54a556')==-1)
{
span[1].style.backgroundColor=oldDivColor;
}
img.src="./images/plus.gif";
div.style.display='none';
}
}

Quand je ne fait aucun traitement en mettant tout en commentaire, rien que le parcours des <div> prend 0,015sec donc c'est pas ca le prob
Le getElementById de l'img sert a changer le + en moins et inversement. Cette operation prend 1 sec.
Le div.parentNode.style.border prend 3 secondes
Le div.style.display='block'; 0.5 sec
Le reste c'est bon.

Si qqun a une idée pour grapiller qque sec. merci :jap:

Reply

Marsh Posté le 09-05-2007 à 18:14:08

Reply

Marsh Posté le 09-05-2007 à 22:38:40

Le treeview de la documentation en ligne de Microsoft est aussi très lent. Donc, j'ai peur qu'il n'y ait pas beaucoup de solution en Javascript. Trop de javascript tue le javascript. Pourqui ne pas faire un sommaire ordinaire ou rien n'est caché ? C'est se compliquer la vie au niveau de la programmation, et compliquer la vie de l'utilisateur qui doit sans arrêt cliquer pour découvrir ce qu'il y a derrière les petits "+". Qui aime les treeview ?

Message édité par olivthill le 09-05-2007 à 22:39:13

Reply

Marsh Posté le 10-05-2007 à 06:33:38

Je suis obligé de faire un treeview sinon c'est trop le bordel niveau recheche d'un element et c'est scroll party all the time.

Si j'imprime le sommaire derouler, ca fait 135 pages...

Reply

Marsh Posté le 10-05-2007 à 08:40:31

quelle machine as-tu pour que ça soit aussi "rapide" ? 4 sec sur un processeur à GHz, je me demande ce que ça doit être sur un 500 %Hz avec 256 Mo de ram ...

Message cité 1 fois

Reply

Marsh Posté le 10-05-2007 à 09:56:27

si la liste des id est statique , tu peux surement les stocker dans un tableau.Mais de toute maniere, c'est le temps de dessins qui prends du temps , donc ut ne pourra pas y faire grd chose

ca bouffera un peu plus de ram , mais tu gagnera du temps

Message cité 1 fois

Reply

Marsh Posté le 10-05-2007 à 15:35:44

NewsletTux a écrit :

quelle machine as-tu pour que ça soit aussi "rapide" ? 4 sec sur un processeur à GHz, je me demande ce que ça doit être sur un 500 %Hz avec 256 Mo de ram ...

E4300@3.2Ghz + 2Go RAM

:cry:

Reply

Marsh Posté le 10-05-2007 à 15:43:49

flo850 a écrit :

si la liste des id est statique , tu peux surement les stocker dans un tableau.Mais de toute maniere, c'est le temps de dessins qui prends du temps , donc ut ne pourra pas y faire grd chose

ca bouffera un peu plus de ram , mais tu gagnera du temps

Bien je pense que c'est deja ce que je fait avec document.all.tags('div') qui me renvoie un tableau d'objet. Chaque objet c'est la balise <div> que je dois hidden.
Bugzilla me dit que c'est pas W3C et d'utiliser des GetElementById :pfff:

Par contre j'ai pas trouver d'autre facon que le GetElementById pour changer l'image + en - (et inversement) quand on clique dessus. Car l'img est avant la balise <DIV> obj.

Message cité 2 fois

Reply

Marsh Posté le 10-05-2007 à 15:47:11

Y'a Pas moyen de multitreader en Javascript? :lol:

Reply

Marsh Posté le 10-05-2007 à 16:23:54

sixpack > flo850 te proposais de stocker l'ensemble des valeurs dans un vrai tableau en pur javascript et de créer les éléments quand il y a besoin plustôt que d'avoir un tableau qui va pointer sur des milliers d'éléments caché qui existent dans la page.
Au fait, ta page, elle sert à quoi? Il y a peut être plus adapter qu'un arbre de plus de 25000 éléments.

Message cité 1 fois

Reply

Marsh Posté le 10-05-2007 à 17:25:52

omega2 a écrit :

sixpack > flo850 te proposais de stocker l'ensemble des valeurs dans un vrai tableau en pur javascript et de créer les éléments quand il y a besoin plustôt que d'avoir un tableau qui va pointer sur des milliers d'éléments caché qui existent dans la page.
Au fait, ta page, elle sert à quoi? Il y a peut être plus adapter qu'un arbre de plus de 25000 éléments.

y'en a pas des milliers, j'ai expres limiter les <DIV> au bloque qu je peux caché. Y'en a 200 a tout casser donc 200 petit boutton + ou -

J'ai pas 25000 elements dans mon treeview, plutot 2000 mais j'ai une page HTML de 25000 lignes de codes deriere.

En gros j'ai un menu a gauche avec le treeview et quand on clique dessus ca ouvre un document a droite

Message édité par sixpack le 10-05-2007 à 17:28:13

Reply

Marsh Posté le 10-05-2007 à 17:25:52

Reply

Marsh Posté le 10-05-2007 à 19:40:56

sixpack a écrit :

Bien je pense que c'est deja ce que je fait avec document.all.tags('div') qui me renvoie un tableau d'objet. Chaque objet c'est la balise <div> que je dois hidden.
Bugzilla me dit que c'est pas W3C et d'utiliser des GetElementById :pfff:

Par contre j'ai pas trouver d'autre facon que le GetElementById pour changer l'image + en - (et inversement) quand on clique dessus. Car l'img est avant la balise <DIV> obj.

en stockant le tableua une fois pour toute dans une variable globale, tu n'evite de devoir le reconstuire a chaque fois

sinon, pour acceler la bordure, essaye de juste changer border-wodth ( element.style.borderWidth ) ca ira peut etre plus vite que changer largeur, couleur et style

Reply

Marsh Posté le 11-05-2007 à 08:44:02

sixpack a écrit :

Bien je pense que c'est deja ce que je fait avec document.all.tags('div') qui me renvoie un tableau d'objet. Chaque objet c'est la balise <div> que je dois hidden.
Bugzilla me dit que c'est pas W3C et d'utiliser des GetElementById :pfff:

Par contre j'ai pas trouver d'autre facon que le GetElementById pour changer l'image + en - (et inversement) quand on clique dessus. Car l'img est avant la balise <DIV> obj.

remarque : c'est getElementById("id" ) et non GetElementById.

Message édité par NewsletTux le 11-05-2007 à 08:44:22

Reply

Marsh Posté le 11-05-2007 à 15:17:58

La structure doit-être identique ?

Reply

Marsh Posté le 11-05-2007 à 16:54:44

Bien ca doit rester un treeview. Apres si tu as une methode que je connais pas pour faire ca ca me va.

Evidement de le treeview est genrer a partir d'un BDD.

Reply

Marsh Posté le 11-05-2007 à 17:31:37

J'utilise plutôt ce genre de méthode :
http://macintoc1.free.fr/arborescenceDOM.html
http://macintoc1.free.fr/arborescenceIE.html

Par contre je sais pas si c'est réellement plus rapide, j'ai pas testé avec des milliers d'éléments.

Reply

Comment accelerer javascript?

Sujets relatifs:

Leave a Replay