Optimiser l'éxécution du JS

Bonjour !

Actuellement en phase de mise en production d'un site très ambitieux au niveau des effets visuels, mes collègues et moi même rencontrons un problème bien ennuyeux.

Le Javascript, sous la forme de fonctions jQuery, ralentit énormément le site. Si sur Firefox et Chrome cela reste acceptable, sur IE c'est tout simplement ignoble. A chaque chargement de page, il faut attendre de longues secondes pour pouvoir commencer à en parcourir le contenu.

J'aimerais savoir comment vous optimisez le jQuery et le javascript en général sur vos pages web. Par exemple, est-ce particulièrement lent d'aller chercher tous les éléments contenant la classe nommée "myClass" ?

Code:

---

$(".myClass").each(function(){...})

---

Est-ce plus lent d'appliquer à un élément un évènement click par le biais de "bind", "live" ou "on" que de le faire directement à la création de l'élément avec un bon vieux onclick ?

Avoir plusieurs setTimeOut cycliques mobilise beaucoup de ressources ?

Plus globalement, n'hésitez pas e faire part de vos divers conseils.

Merci par avance !
Jeremy

cela peut également provenir des directives du serveur ...
mise ne cache des fichiers externes js etc ...

Sinon ... ben IE c'est [censuré]#¤@%?$£[/censuré]

Certes, mais je suis bien obligé de faire avec, on peut pas sacrifier un tel pourcentage d'utilisateurs :mrgreen:

Quelles directives serveur indiquent de cacher le JS ?

Remarque, on n'a que très peu de JS provenant de l'extérieur, presque tout est en local.

Étonnant, même une animation gourmande bien codé en jQuery ne devrait pas trop ralentir la page.

Citation:

---

Envoyé par JerryOne3

Avoir plusieurs setTimeOut cycliques mobilise beaucoup de ressources ?

---

Oui et non. Ca dépend des délais bien sûr, si vous lancé une animation toutes les 1 millisecondes, c'est sûr que ça va ramer. D'ailleurs pourquoi utiliser des settimeout, alors qu'en général jQuery gère très bien la cadence des animations et permet de les délayer avec la méthode "delay".

Aussi vérifier que vous ne lancez pas plusieurs fois la même animation sur le même objet car si jQuery essaye d'appliquer 2 mouvements décalé au même objet, c'est sûr que ça va laguer aussi.

http://www.developpez.net/forums/d10...cache-control/

Merci pour le lien :)

A priori il n'y a pas de problème de répétitions d'animations. Et quand je parle de cycles, ils sont tout de même plus longs que ça.

Citation:

---

Envoyé par JerryOne3

Si sur Firefox et Chrome cela reste acceptable, sur IE c'est tout simplement ignoble.

---

Citation:

---

Envoyé par JerryOne3

je suis bien obligé de faire avec, on peut pas sacrifier un tel pourcentage d'utilisateurs

---

Sur ce pourcentage d'utilisateurs, peut être qu'un grand nombre, accepteraient d'installer le plugin Google Chrome Frame c'est tres simple a mettre en place :ccool: (cf la doc)
pour les perfs cela semble identique a Chrome . par contre tous n'est pas encore implémenté ( WebGL ne fonctionne pas :cry: )

j'ai cru que ce post était un duplicata du précédent

http://www.developpez.net/forums/d12.../optimiser-js/

à 5 jours deux post avec le même problème sur JQuery
A+JYT

Citation:

---

A chaque chargement de page, il faut attendre de longues secondes pour pouvoir commencer à en parcourir le contenu.

---

Un chargement asynchrone des scripts est-il envisageable ?

@p3ga5e : c'est malheureusement en dehors de nos possibilités.

@sekaijin : merci, je vais parcourir ce post aussi !

@dkmix : non, pas vraiment : les effets chargés sont nécessaires au bon fonctionnement des pages telles qu'elles sont construites actuellement.

Une question supplémentaire : comment évaluer le temps d’exécution / de mise en place sur la page d'une fonction donnée ? Je voudrais bien savoir si les modifications que je fais dessus sont efficaces et réduisent le temps de latence occasionné ou non...

il est possible de faire des tests avec jsperf

Citation:

---

Envoyé par JerryOne3

Une question supplémentaire : comment évaluer le temps d’exécution / de mise en place sur la page d'une fonction donnée ? Je voudrais bien savoir si les modifications que je fais dessus sont efficaces et réduisent le temps de latence occasionné ou non...

---

Code:

---

1 2 3 4

var dateDebut = (new Date()).getTime(); appelDeFonction(); var dateFin = (new Date()).getTime(); console.log("l'exécution a duré : "+(dateFin-dateDebut));

---

Will :

Code:

---

(new Date()).getTime();

---

Bof bof :aie:

Code:

---

new Date().getTime();

---

fonctionne aussi et surtout :

Code:

---

Date.now();

---

:)

Code:

---

Date.now();

---

???

kézako ?

:oops:

Pour le premier raccourci, on n'est jamais trop prudent, quand on ne connait pas l'ordre d'interprétation(comme c'était mon cas), vaut mieux mettre trop de parenthèses que pas assez (ça ne fait jamais de tort).

Pour le second ".now()", comme spacefrog, je ne connaissais pas. (et pour ma défense je dirai, après recherche sur le web, que ce n'est pas compatible avec IE<9, donc vaut mieux l'éviter pour rester compatible)

ben c'est pas que je connais pas ... c'est que ça marche pas ...
enfin dans mes tests ça plante

tu as une syntaxe d'utilisation ?

Citation:

---

Envoyé par SpaceFrog

ben c'est pas que je connais pas ... c'est que ça marche pas ...
enfin dans mes tests ça plante

tu as une syntaxe d'utilisation ?

---

Tu utilises quoi comme navigateur, au vue de la table des compatibilités, on pourrait penser que tu utilises IE (et un vieux). 8O

Sinon, j'aime bien la solution qu'ils proposent sur cette même page :

Code:

---

+(new Date)

---

Citation:

---

Envoyé par Willpower

Code:

---

1 2 3 4

var dateDebut = (new Date()).getTime(); appelDeFonction(); var dateFin = (new Date()).getTime(); console.log("l'exécution a duré : "+(dateFin-dateDebut));

---

---

C'est bien ce que j'ai fait. Les temps sont pas terribles, mais pas ignobles non plus. Ca n'explique pas le freeze de 10 secondes de IE 7 - 8 à la fin du chargement de la page. Comme si le moteur JS peinait à résoudre tout ce qu'on lui demande...

IE8 c'est pas si vieux ...

Citation:

---

Envoyé par SpaceFrog

c'est que ça marche pas ...

---

C'est pourtant cross-browser (y compris IE9+) :?

Code:

---

alert(Date.now())

---

notez bien pas de new Date() ni de Date(), juste Date.
L'avantage est que ça évite d'instancier un objet date rien que pour ça...

:fleche: https://developer.mozilla.org/en-US/...ects/Date/now/

Je suis encore obligé de tester sous IE6
...

:cry:

Citation:

---

Envoyé par JerryOne3

C'est bien ce que j'ai fait. Les temps sont pas terribles, mais pas ignobles non plus. Ca n'explique pas le freeze de 10 secondes de IE 7 - 8 à la fin du chargement de la page. Comme si le moteur JS peinait à résoudre tout ce qu'on lui demande...

---

Quand tu mets un compteur au début et à la fin de TOUT ton js, ça affiche 10 secondes ou un temps bien inférieur ?

Si ça affiche un temps inférieur, c'est que ton code s'exécute de manière asynchrone, probablement via des "timeout". Dans ce cas ça te donnera déjà une piste où chercher.

Autrement, c'est encore mieux, si le temps affiche les 10 secondes, il suffit de faire une recherche dichotomique de la provenance des lenteur en divisant chaque fois ton code en deux et en regardant le temps d'exécution. (très rapide, sur un code de 1.000.000 de lignes de code, tu trouves la ligne faisant problème en seulement 20 tests) ;)

Citation:

---

C'est bien ce que j'ai fait. Les temps sont pas terribles, mais pas ignobles non plus. Ca n'explique pas le freeze de 10 secondes de IE 7 - 8 à la fin du chargement de la page. Comme si le moteur JS peinait à résoudre tout ce qu'on lui demande...

---

Avez-vous regardé ce que donnait le profileur d'IE8 ? ( F12 / onglet profileur /démarrer profileur / relancer la page / arrêter profileur)

Bon, en faisant comme conseillé, je parviens péniblement à grappiller des secondes. Je vous remercie énormément pour l'aide que vous m'avez fourni, il y a beaucoup de travail sur le sujet à présent.