Optimiser l'éxécution du JS Fermé

Question

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" ?

$(".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

bg62 · Answer

pourquoi multiplier les posts surtout quand tu mets " résolu ailleurs" en plus ???
https://forums.commentcamarche.net/forum/affich-25558983-javascript-de-l-interet-de-la-compression

jerryone3 · Answer

Les deux sujets n'ont absolument rien à voir. Il y a la compression du javaScript qui optimise le chargement de la page, et il y a l'optimisation du code, que je n'ai absolument pas évoquée là bas.

jerryone3 · Answer

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

Mihawk · Answer

Salut,

Déjà pour le temps de chargement je te recommande le plugin Firefox "YSlow" qui donne le temps de chargement de la page.

Ensuite je ne connais pas jQuery. Moi j'utilisais Dojo, un autre framework JS basé sur l'architecture MVC et qui avait poussé le temps de chargement de certaines de mes pages à plus de quarante secondes !

J'ai alors découvert le système de "build" : Dojo contenait une moulinette se chargeant de récupérer les classes, les compresser et surtout tout réunir en un seul fichier.

N'oublions pas que le JS est un langage client et donc que chaque fichier JS doit être préalablement téléchargé par le poste client sur le serveur. Cela engendre des transferts de fichiers assez lourds.

Il faut donc voir ton optimisation selon 3 axes :
1/ L'optimisation de ton code : pas de variables et de boucles à tire-larigot, mais ça c'est du ressort du savoir-faire du développeur.
2/ Le volume des fichiers à transférer entre le serveur et le client : compression du code pour supprimer les espaces et les commentaires. Remplacement des noms de variables et méthodes par des noms beaucoup plus courts, etc... Cela peut être fait par des utilitaires.
3/ Le nombre de fichiers à transférer : en général on essaye de réunir tous les fichiers compressés en un seul. Cela évite de perdre du temps en ouverture/fermeture de connexions client/serveur.
 
En jouant sur tout ça j'avais passé mon site de 42s à environ 6s.

Optimiser l'éxécution du JS

4 réponses

Discussions similaires