Les bonnes pratiques pour Optimiser jQuery

jquery

Actuellement, de nombreux développeurs utilisent jQuery. Il faut avouer que certains d’entre eux ne l’utilise pas sûrement comme il le faut puisque un bon nombre se plaint des performances médiocres qu’ils obtiennent.
Dans cet article nous aborderons des bonnes pratiques à adopter pour l’optimisation de la performance de ce plugin JavaScript.

Toujours rechercher à partir d’un ID

Celui-ci se retrouve directement mappée sur méthode native de JavaScript qui est getElementById().
Il faut savoir que le sélecteur le plus rapide du plugin jQuery est le sélecteur d’ID $(‘#mon-id’).

Dans ce code, la sélection suivante peut présenter une certaine perte de performance :

Pour une sélection plus rapide, il est préférable d’écrire ceci :

La sélection de plusieurs éléments

Concernant la sélection d’éléments multiples, celle-ci parcours le DOM transversalement.
De ce fait, cela peut coûter énormément en ressources et peut être également très long. Dans le but de minimiser les pertes de performances, il est préférable de toujours rechercher à partir de l’ID du parent le plus proche :

Utilisation des balises avant les classes

Pour ceux qui ne le savent pas, le deuxième sélecteur le plus rapide du plugin jQuery est le sélecteur de balise $(‘head’).
La raison est toute simple, puisque celui-ci s’agit d’un mappage vers une méthode native de JavaScript qui est getElementsByTagName().

Une petite remarque : le sélecteur de classe fait partie des sélecteurs les plus lents dans jQuery.
Sous IE, il boucle sur le DOM complet. Il faudra éviter de l’utiliser à chaque fois que cela est possible.

Pour l’amélioration des performances de jQuery, il faut impérativement éviter de préfixer un ID par une balise.
Pourquoi ? Parce que cela amène au ralentissement du processus de recherche puisque jQuery effectuera une boucle sur tous les div à la recherche de l’ID « content » :

Également, il est totalement futile, redondant et inutile de rechercher à partir de nombreux ID :

Mettre en cache les objets jQuery

Pour éviter de râler à cause des performances médiocres que vous obtenez en utilisant jQuery, il faut juste que vous preniez l’habitude de sauver tous vos objets jQuery dans des variables.

Un petit exemple :
Si vous aviez l’habitude de coder comme ceci :

Cessez immédiatement et préférez plutôt le passage à une variable locale avant de continuer à traiter :

Limiter les manipulations directes du DOM

Limiter les manipulations directes du DOM n’est pas seulement pour jQuery uniquement, mais aussi pour le JavaScript en général.

Par exemple, dans le cas où vous aurez besoin de créer dynamiquement une liste d’éléments, évitez de faire ceci :

Au lieu de cela, préférez tout d’abord la création d’une collection d’éléments dans une chaîne avant son insertion au DOM :

Pour plus de rapidité, pensez à toujours encapsuler plusieurs éléments dans une « node » parente avant d’insérer :

La délégation à $(window).load

Une mauvaise habitude ou une tentation chez les développeurs de jQuery est l’association de toutes leurs fonctions à l’évènement $(document).ready.
Cela est tout à fait normal puisque cet événement est la plus utilisé dans la majorité des exemples présente sur internet.
Pourquoi le changer s’il est autant utilisé ?

Il faut savoir que l’évènement $(document).ready se déclenche pendant le « rendering » de la page par navigateur.
En clair, au moment où des éléments sont encore en téléchargement par celui-ci. Ainsi, si un ralentissement du navigateur est remarqué durant le « loading » de la page, il se peut que toutes les fonctions de cet évènement soient à l’origine de ce ralentissement.

Pour la réduction de l’utilisation du processeur, vous n’aurez tout simplement qu’à affecter toutes les fonctions jQuery à l’évènement $(window).load. L’évènement ne se déclenchera alors qu’après que tous les objets appelés par le HTML soient téléchargés, y compris le contenu des « iframes ».

Toutes les fonctionnalités considérées comme secondaires se présentent comme de parfaits candidats pour mettre dans $(window).load : les animations, les drap-n-drop, les pré-chargements des images ou encore les effets visuels.

Répondre