[Javascript]Ralentissement de certains scripts

Bonjour à tous!!

Je viens vers vous car une question me turlupine

J'ai créé un menu style flash en javascript et il rame pas mal (sur les anciennes bécanes et sur IE), sur certaines pages seulement...

Voici le lien vers le site: www.pierrefevrier.fr
(cette version du script est en train d'être optimisée donc n'est pas complètement terminée)
Voici le lien vers l'ancienne version du site: www.pierrefevrier.fr/vStable

Je me suis cassé la tête à tout refaire le script de manière à l'optimiser au maximum pour ne finalement noter aucune différence dans le temps d'exécution

Merci de m'aider à trouver d'où peut bien venir le problème
Modifié par Dark$hadow (24 Jul 2008 - 15:29)

Hello,

Très sympa comme menu, j'aime beaucoup.

J'ai survolé une fois chaque onglet, et le profiler de Firebug m'indique 178 appels à la fonction survoller ! Ca me parait beaucoup.
En regardant rapidement le code je vois que tu fais appel à cette fonction régulièrement à l'intérieur d'elle même avec des setTimeout réglés sur 20ms, c'est à dire quasiment instantanés.

Même si tu semble prendre soin de vider le timer s'il est inutile, je pense que tu devrais effectuer ce test plus haut dans la hiérarchie de tes if/else, là le temps que ton code arrive au moment de le clear, à mon avis il s'est déjà executé.

Je pense que ton soucis de lenteur vient du fait que tu mets beaucoup de fonctions en setTimeout et que le navigateur doit toutes les executer une par une avant de pouvoir "reprendre la main". D'autant que si je me souviens bien, IE6 a des problèmes de libération de mémoire sur les setTimeout.

Voila, j'espère que ces pistes t'aideront !

Merci beaucoup pour ta réponse bien argumentée!!

Je ne connaissais pas cette fonction de Firebug et j'avoue être émerveillé par sa puissance.

J'ai fait plusieurs tests grâce à ce nouvel outil et il en ressort que sur la première version de mon script, il y a 28.5ms de temps net total et que sur ma seconde version, il n'y en a plus que 18ms.(Si j'ai bien compris mon optimisation n'a pas servie à rien, ouf!!! )

Reste à savoir comment optimiser les setTimeOut si pour toi le ralentissement vient de là (sur Firefox 2, le problème apparait aussi sur les PC un peu vieux)

Merci en tout les cas, ce projet de menu dynamique me tient vraiment à cœur

Edit: J'ai fait le test de supprimer les setTimeOut (stupide me direz vous) et forcément il n'y a plus d'effet de slide: tout est instantané.
Quel système permettrait donc de faire une pause de quelque milisecondes entre chaque exécution de la fonction sans pour autant faire ramer le navigateur: THAT'S THE QUESTION
Modifié par Dark$hadow (24 Jul 2008 - 23:10)

Bon je viens de refaire des tests sur des vieux PC.

Première chose: j'ai passé le timer à 10ms, ce qui a permis de limiter l'effet de saccade.

Reste un problème: sur les machines pas trop puissantes, c'est firefox 2 qui peine à exécuter le script (ça saccade sérieux), donc y aurait-il encore une astuce pour que le script passe sans problème sur n'importe quelle machine?

Merci encore pour votre aide, elle m'est précieuse

Salut Dark$hadow,

Tu ne pourras pas éviter les lenteurs sur les vielles machine. Par contre ce que tu peux faire c'est que le temps d'exécution soit toujours le même.

C'est à dire que sur une bonne machine il y aura plus d'images par secondes et sur une très mauvaise ton effet sera de deux images. Cela évitera que l'effet soit désespérément long.

Pour cela la méthode est d'utiliser le temps comme repère. C'est a dire que ton état zéro correspond au temps au lancement de ta boucle. Ton état 1 correspond à ce temps plus le temps d'exécution que tu auras décidé. Et les étapes intermédiaire seront des fractions de ce total en fonction du temps actuel.

un exemple : on commence le déplacement à 10h il doit durer 30min, chaque boucle 1min pour un centimètre.
À la troisième boucle le temps est 10h04, l'avancement du déplacement, ne serat pas de 3 centimètre comme cela devrait mais de 4, parcequ'il correspond non pas au nombre de boucle mais au temps actuel même si le script a pris du retard.

en script ça donne quelque chose comme ça :

function changeWidth(el,to,from,duration){
   var startTime = new Date().getTime();
   var timer = setInterval(function(){		
      var time = new Date().getTime();
         if (time < startTime + duration){
            var p=(time - startTime)/duration;        
            el.style.width = ((to-from)*p+from)+'px'; 
         }else {		  
            clearInterval(timer);
            el.style.width = to+'px';
         }   
    }, 20);
};

C'est la méthode schématisé utilisé par les différentes bibliothèques javascript qui te permette de faire ce genre d'effet.

Bien sûr c'est mieux de développer la fonction de tel manière à pouvoir changer plus de propriétés avec la même fonction.
Modifié par matmat (25 Jul 2008 - 21:37)

Merci matmat et désolé pour le délais de réponse, j'étais pô là^^

Je vais tester tout ça, l'idée est vraiment bien!!!

Je vous tiens au courant de ce que ça donne

Bonsoir à tous!!!

Bon j'ai abandonné l'idée de l'alternative pour vieux PC (ça pomperai encore des ressources pour tout le monde).

Le menu tourne bien donc mais il me reste une petite question:

Il est possible de modifier la balise title de la page mais est-il possible de modifier l'url(du moins ses paramètres) sans recharger la page? (faire de l'AJAX ultra propre quoi )

J'ai fait pas mal de recherches et je n'ai trouvé qu'une fonction permettant de rechercher dans les paramètres de l'url et non de les modifier.

Merci à tous et bonne soirée!!!