Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1427 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Comment accelerer javascript?

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Comment accelerer javascript?

n°1557541
sixpack
Posté le 09-05-2007 à 18:14:08  profilanswer
 

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 :
  1. div.parentNode.style.border='1px solid #C4C4C4';


 

Code :
  1. function Toggle(div,etat)
  2. {
  3. var img = document.getElementById('img'+div.id.substring(3,div.id.length));
  4.  if((div.style.display=='none')&&(etat!=='close'))
  5.  {
  6.     oldDivColor=div.parentNode.style.backgroundColor;
  7.     div.parentNode.style.backgroundColor=div.style.backgroundColor;
  8.                 div.parentNode.style.border='1px solid #C4C4C4';
  9.  img.src="./images/minus.gif";
  10.  div.style.display='block';
  11.  }
  12. else if (etat!=='open')
  13.   {
  14.  div.parentNode.style.border='';
  15.  div.parentNode.style.backgroundColor=oldDivColor;
  16.  span=div.parentNode.getElementsByTagName('SPAN');
  17.  if(span[1].style.backgroundColor.indexOf('#54a556')==-1)
  18.     {
  19.       span[1].style.backgroundColor=oldDivColor;
  20.      }
  21.     img.src="./images/plus.gif";
  22.     div.style.display='none';
  23.   }
  24. }


 
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:

mood
Publicité
Posté le 09-05-2007 à 18:14:08  profilanswer
 

n°1557673
olivthill
Posté le 09-05-2007 à 22:38:40  profilanswer
 

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
n°1557734
sixpack
Posté le 10-05-2007 à 06:33:38  profilanswer
 

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...

n°1557751
NewsletTux
&lt;Insérez ici votre vie /&gt;
Posté le 10-05-2007 à 08:40:31  profilanswer
 

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 ...

n°1557783
flo850
moi je
Posté le 10-05-2007 à 09:56:27  profilanswer
 

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

n°1558155
sixpack
Posté le 10-05-2007 à 15:35:44  profilanswer
 

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:  

n°1558169
sixpack
Posté le 10-05-2007 à 15:43:49  profilanswer
 

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.

n°1558173
sixpack
Posté le 10-05-2007 à 15:47:11  profilanswer
 

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

n°1558209
omega2
Posté le 10-05-2007 à 16:23:54  profilanswer
 

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.

n°1558316
sixpack
Posté le 10-05-2007 à 17:25:52  profilanswer
 

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
mood
Publicité
Posté le 10-05-2007 à 17:25:52  profilanswer
 

n°1558431
flo850
moi je
Posté le 10-05-2007 à 19:40:56  profilanswer
 

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

n°1558584
NewsletTux
&lt;Insérez ici votre vie /&gt;
Posté le 11-05-2007 à 08:44:02  profilanswer
 

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
n°1558953
MacIntoc
tu lis une phrase formidable.
Posté le 11-05-2007 à 15:17:58  profilanswer
 

La structure doit-être identique ?

n°1559043
sixpack
Posté le 11-05-2007 à 16:54:44  profilanswer
 

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.

n°1559073
MacIntoc
tu lis une phrase formidable.
Posté le 11-05-2007 à 17:31:37  profilanswer
 

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.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Comment accelerer javascript?

 

Sujets relatifs
probleme de formulaire généré en JavascriptErreur "simple" Javascript sous IE
[JAVASCRIPT] Presonnaliser une alert()[HTML/CSS/Javascript] Récuperer l'id du texte séléctionné
php jsp javaScript Programmation[Javascript] Référence à un objet ?
Conflit javascript ?Traiter un formulaire avec javascript + DIV
javascript et formulaireLe mangnifiques erreurs en javascript (noob inside)
Plus de sujets relatifs à : Comment accelerer javascript?


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR