Optimiser l'éxécution du JS
jerryone3
Messages postés
55
Date d'inscription
Statut
Membre
Dernière intervention
-
bg62 Messages postés 23732 Date d'inscription Statut Modérateur Dernière intervention -
bg62 Messages postés 23732 Date d'inscription Statut Modérateur Dernière intervention -
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
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
A voir également:
- Optimiser l'éxécution du JS
- Optimiser son pc - Accueil - Utilitaires
- Tcp optimiser - Télécharger - Optimisation
- Optimiser windows 10 - Guide
- Optimiser et défragmenter le lecteur - Guide
- Le service spouleur d'impression local n'est pas en cours d'exécution - Guide
4 réponses
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
https://forums.commentcamarche.net/forum/affich-25558983-javascript-de-l-interet-de-la-compression
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.
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...
vois ici pour les détails (un exemple ...):
https://longuetraine.fr/?article771/analyser-et-optimiser-le-temps-de-chargement-d-une-page-web
;)
https://longuetraine.fr/?article771/analyser-et-optimiser-le-temps-de-chargement-d-une-page-web
;)
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.
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.
