jQuery, qu'est-ce que c'est et devriez-vous l'utiliser?
jQuery est une petite bibliothèque JavaScript qui essaie de faciliter le travail avec HTML. Il fournit plus de fonctions pour manipuler des éléments sur des pages Web, ce qui le rend utile pour créer du contenu dynamique. Est-ce le bon choix pour votre site Web?
Sommaire
Qu'est-ce que jQuery et à quoi sert-il?
jQuery est partout; c'est de loin la bibliothèque JS la plus populaire, elle est intégrée dans les principaux systèmes comme WordPress, et les questions JS sur StackOverflow semblent toujours avoir des réponses dans jQuery.
La bibliothèque propose un raccourci pour de nombreuses fonctions JS utilisées pour manipuler le DOM HTML, qui peuvent souvent être longues et ennuyeuses à taper. jQuery offre une syntaxe beaucoup plus courte et plus propre, et lorsque vous tapez document.getElementByID()
cent fois, le réduire à un seul personnage peut économiser beaucoup de temps de développement.
L'attrait principal de jQuery est sa fonction de sélection, utilisée pour rechercher des éléments dans votre code HTML et obtenir une référence à ceux-ci. Par exemple, si vous souhaitez rechercher un élément par un ID, vous pouvez faire:
$('#ID')
Ce qui est beaucoup plus facile à taper que:
document.getElementByID('ID')
Bien sûr, ce n'est pas le seul moyen de sélectionner des éléments; jQuery peut utiliser presque tous les sélecteurs CSS, tous emballés dans son $
une fonction. le $
objet contient également toutes les autres méthodes jQuery, comme $.ajax()
.
Le JavaScript moderne a en fait cette même fonctionnalité de sélection avec le document.querySelectorAll()
, donc si vous utilisez uniquement jQuery pour taper "document.querySelectorAll()
"Un peu moins, vous pouvez renoncer à jQuery en aliasant des fonctions $
, ou toute autre chose:
window.$ = document.querySelectorAll
Mais ce n'est pas tout ce que jQuery est bon pour; il est bien meilleur pour travailler avec des éléments DOM que vanilla JS, avec des fonctions de traversée pour analyser une liste d'éléments et des filtres pour les résultats de recherche. Lors de la sélection à partir de HTML avec vanilla JS, vous obtenez une liste des éléments DOM littéraux, mais jQuery renvoie des objets jQuery avec des méthodes et des propriétés supplémentaires, qui peuvent vous être utiles.
jQuery a quelques autres fonctionnalités, comme l'animation et le support AJAX, mais les animations CSS pures sont souvent beaucoup plus rapides, et les bibliothèques comme axios gèrent les demandes AJAX beaucoup mieux que jQuery, donc vous ne devriez vraiment utiliser jQuery que pour travailler avec le DOM. jQuery propose désormais une version «slim» sans ces fonctionnalités, ce qui permet d'économiser environ 6 Ko lors de l'utilisation du fichier compressé et compressé.
JQuery ralentira-t-il mon site Web?
L'ajout d'un grand nombre de bibliothèques Javascript, de frameworks et de ballonnements à votre site Web est le moyen le plus simple de ralentir le chargement des pages, en particulier pour les utilisateurs mobiles sur de mauvaises connexions. Cependant, jQuery est une légère exception à cette règle; il est très petit et il est utilisé partout, donc si vous le référencez à partir d'un CDN populaire comme Google, il y a de fortes chances que tout utilisateur moyen le mette en pré-cache et n'aura pas besoin de télécharger quoi que ce soit depuis vos serveurs. Cependant, cela ne le rend pas gratuit à inclure, car il doit toujours être chargé à partir de la mémoire de l'utilisateur et exécuté, ce qui prendra du temps.
S'ils ne l'ont pas mis en cache, vous pouvez utiliser la version réduite et compressée, qui ne fait que 28,78 Ko, probablement moins que la taille de votre code HTML. Ce n'est pas mieux que rien et cela peut ajouter une seconde environ à votre chargement de page sur des connexions 3G lentes (sans cache).
Étant donné que jQuery bloque le rendu, vous devrez charger jQuery avant d'afficher la page, ce qui n'est pas bon pour les utilisateurs mobiles. Si vous essayez de rendre votre site essentiellement statique aussi vite que possible sur tous les appareils, vous devriez probablement opter pour JavaScript vanille sur jQuery pour cette seule raison. Mais si votre site est très dynamique, jQuery ou d'autres bibliothèques en valent probablement la peine pour accélérer le temps de développement. Pour les sites internes de l'entreprise, les panneaux d'administration ou tout ce qui n'est pas destiné à l'utilisateur final, vous ne devriez pas vous soucier de l'inclure.
Soyez conscient du code Janky
Comme jQuery s'enroule autour des fonctions Javascript natives, il sera toujours moins performant que d'utiliser vanilla JS, le compromis étant qu'il accélère le temps de développement. jQuery est toujours très rapide, mais vous devrez surveiller le code non optimisé. Avoir trop d'appels de fonction décalés peut faire baisser le taux de rafraîchissement de votre application en dessous du taux de rafraîchissement, ce qui ressemblera à un microstuttering saccadé pour l'utilisateur final, ou simplement à un décalage direct.
Utilisation for
boucles plutôt que jQuery each
boucle lorsque vous effectuez une boucle sur un nombre important d'éléments. Ils sont tous les deux rapides, mais each
est beaucoup plus lent, bien qu'il soit beaucoup plus lisible. La plupart du temps supplémentaire provient du retard à la fin de la boucle avant le début de la suivante, donc les boucles avec une petite quantité de code et une longue longueur verront une performance plus élevée que les boucles avec beaucoup de code et quelques éléments.
Les sélecteurs jQuery sont lents. En fait, faire quoi que ce soit avec le DOM est lent, vous voudrez donc minimiser les appels liés au DOM dans vos scripts. Si vous faites référence à un élément plusieurs fois, mettez-le en cache dans une variable:
var $item = $('#item')
Cela empêche jQuery d'exécuter plusieurs recherches chaque fois que vous utilisez le $()
syntaxe pour trouver un élément. le $
devant la variable est la convention pour nommer les variables d'objet jQuery, et n'est pas obligatoire.
Vous pouvez accélérer la sélection de jQuery en utilisant des ID sur les classes chaque fois que possible. La sélection par ID est beaucoup plus rapide que la sélection par classe, car jQuery s'enroule simplement autour du natif .getElementByID()
plutôt que d'utiliser son propre moteur de sélection. Si vous devez sélectionner par classe, vous devez au moins essayer de spécifier un contexte pour indiquer à jQuery où chercher. Par exemple, en utilisant:
$('.class', '#container')
Sera beaucoup plus rapide que la simple recherche '.class'
, car jQuery ignorera tout dans le DOM, sauf le #container
élément.
Dois-je utiliser jQuery?
jQuery est une bibliothèque, pas un framework. Une bibliothèque fournit quelques outils utiles à utiliser ou résout un problème avec lequel vanilla JS a du mal. Un framework, comme React ou Vue, fournit une structure plus rigide et contrôle la plupart du fonctionnement de votre application.
jQuery a une syntaxe simple et peut faciliter votre développement. Si vous ajoutez simplement quelques éléments simples à votre site Web, vous n'en avez probablement pas besoin, mais si vous allez faire beaucoup de contenu dynamique, jQuery peut vraiment accélérer le temps de développement. Si vous débutez dans le développement JS, l'apprentissage de jQuery peut vous aider à démarrer des applications simples.
Cependant, dans le contexte d'une grande application, les avantages deviennent plus flous. jQuery n'est pas conçu pour être le moteur de grandes applications Web, mais il est souvent utilisé à la place d'un cadre plus compliqué pour créer des pages dynamiques simples. Cela fonctionne bien pour les applications simples, mais est très facile à dépasser. Si vous avez un réel besoin de jQuery pour faire fonctionner votre application Web, vous avez probablement aussi un besoin beaucoup plus important de structure, de modularité et d'extensibilité offertes par un framework complet.
Mais, jQuery est beaucoup plus performant qu'un énorme framework comme React, donc si vous voulez rester plus proche du métal, jQuery pourrait être un bon ajout pour nettoyer votre code. Si vous travaillez dans une base de code existante, jQuery est facile à ajouter, par rapport à un framework complet qui peut nécessiter beaucoup de refactoring, d'apprentissage et de mise à jour. De plus, jQuery est juste beaucoup plus simple que la plupart des frameworks Web et ne vous oblige pas à repenser la façon dont vous codez les choses.
jQuery n'est finalement qu'une bibliothèque pour la manipulation DOM, donc si votre cas d'utilisation nécessite une manipulation DOM plus complexe que celle fournie par JS vanilla, jQuery pourrait être pour vous.