web-dev-qa-db-fra.com

Quand utiliser JavaScript JavaScript à la place de jQuery?

En remarquant/essayant de répondre aux questions courantes de jQuery, j’ai remarqué que certaines pratiques utilisant javascript, au lieu de jQuery, vous permettent réellement d’écrire moins et de faire ... bien le même montant. Et peut également apporter des avantages de performance.

Un exemple spécifique

$(this) vs this

À l'intérieur d'un événement de clic référençant l'id des objets cliqués

jQuery

$(this).attr("id");

Javascript

this.id;

Existe-t-il d'autres pratiques courantes comme celle-ci? Là où certaines opérations Javascript pourraient être accomplies plus facilement, sans faire intervenir jQuery. Ou est-ce un cas rare? (d'un "raccourci" jQuery nécessitant plus de code)

EDIT: Bien que j'apprécie les réponses concernant les performances de jQuery par rapport aux performances javascript, je suis en train de chercher des réponses beaucoup plus quantitatives. Lors de l'utilisation de jQuery, des cas où l'on serait mieux (lisibilité/compacité) d'utiliser du javascript simple au lieu de $(). En plus de l'exemple que j'ai donné dans ma question initiale.

javascriptjqueryperformance
233
jondavidjohn
  • this.id (Comme vous le savez)
  • this.value (Sur la plupart des types d’entrée. Seuls les problèmes que je connais sont IE quand un <select> N’a pas les propriétés value définies sur ses <option> Éléments ou entrées radio dans Safari.)
  • this.className Pour obtenir ou définir une propriété "classe" entière
  • this.selectedIndex Contre un <select> Pour obtenir l'index sélectionné
  • this.options Contre un <select> Pour obtenir une liste d'éléments <option>
  • this.text Contre un <option> Pour obtenir son contenu textuel
  • this.rows Contre un <table> Pour obtenir une collection d'éléments <tr>
  • this.cells Contre un <tr> Pour obtenir ses cellules (td & th)
  • this.parentNode Pour obtenir un parent direct
  • this.checked Pour obtenir l'état vérifié d'un checkboxMerci @ Tim Down
  • this.selected Pour obtenir l'état sélectionné d'un optionMerci @ Tim Down
  • this.disabled Pour obtenir l'état désactivé d'un inputMerci @ Tim Down
  • this.readOnly Pour obtenir l'état readOnly d'un inputMerci @ Tim Down
  • this.href Contre un élément <a> Pour obtenir son href
  • this.hostname Contre un élément <a> Pour obtenir le domaine de son href
  • this.pathname Contre un élément <a> Pour obtenir le chemin de son href
  • this.search Contre un élément <a> Pour obtenir la chaîne de requête de son href
  • this.src Contre un élément où il est valide d'avoir un src

... Je pense que vous avez l'idée.

Il y aura des moments où la performance est cruciale. Comme si vous exécutiez plusieurs fois une boucle, vous souhaiterez peut-être abandonner jQuery.

En général, vous pouvez remplacer:

$(el).attr('someName');

avec:

Ci-dessus était mal formulé. getAttribute n'est pas un remplacement, mais il récupère la valeur d'un attribut envoyé par le serveur, et son setAttribute correspondant le définira. Nécessaire dans certains cas.

Les phrases ci-dessous l'ont en quelque sorte couvert. Voir cette réponse pour un meilleur traitement.

el.getAttribute('someName');

... afin d'accéder directement à un attribut. Notez que les attributs ne sont pas les mêmes que les propriétés (bien qu’ils se reflètent parfois les uns dans les autres). Bien sûr, il y a aussi setAttribute.

Supposons que vous ayez reçu une page où vous devez dérouler toutes les balises d’un certain type. C'est court et facile avec jQuery:

$('span').unwrap();  // unwrap all span elements

Mais s'il y en a beaucoup, vous voudrez peut-être faire une petite API DOM native:

var spans = document.getElementsByTagName('span');

while( spans[0] ) {
    var parent = spans[0].parentNode;
    while( spans[0].firstChild ) {
        parent.insertBefore( spans[0].firstChild, spans[0]);
    }
    parent.removeChild( spans[0] );
}

Ce code est assez court, il fonctionne mieux que la version jQuery et peut facilement être transformé en une fonction réutilisable dans votre bibliothèque personnelle.

Il peut sembler que j'ai une boucle infinie avec le while extérieur à cause de while(spans[0]), mais parce que nous avons affaire à une "liste en direct", elle est mise à jour lorsque nous faisons la fonction parent.removeChild(span[0]);. C’est une fonctionnalité très utile que nous manquons lorsque nous travaillons avec un tableau (ou un objet semblable à un tableau).

203
user113716

La bonne réponse est que vous toujours subissez une pénalité de performance lorsque vous utilisez jQuery au lieu de JavaScript "natif ancien". C'est parce que jQuery est une bibliothèque JavaScript. Ce n'est pas une nouvelle version sophistiquée de JavaScript.

La raison pour laquelle jQuery est puissant, c’est qu’elle rend certaines choses excessivement fastidieuses dans une situation impliquant plusieurs navigateurs (AJAX est l’un des meilleurs exemples), atténue les incohérences entre la myriade de navigateurs disponibles et fournit une API cohérente. Cela facilite également les concepts tels que l'enchaînement, l'itération implicite, etc., pour simplifier le travail sur des groupes d'éléments.

L'apprentissage de jQuery ne remplace pas l'apprentissage de JavaScript. Vous devriez avoir une base solide dans le dernier cas pour que vous puissiez pleinement comprendre ce que le savoir vous facilite.

- Édité pour englober les commentaires -

Comme les commentaires sont rapides à souligner (et je suis d’accord avec 100%), les déclarations ci-dessus font référence à un code d’analyse comparative. Une solution JavaScript 'native' (en supposant qu'elle soit bien écrite) surperformera une solution jQuery qui réalise la même chose dans presque tous les cas (j'aimerais bien voir un exemple autrement). jQuery accélère le temps de développement, ce qui est un avantage important que je ne veux pas minimiser. Il facilite le code facile à lire, facile à suivre, ce qui est plus que certains développeurs sont capables de créer eux-mêmes.

À mon avis, la réponse dépend donc de ce que vous essayez d’atteindre. Si, comme je l'ai supposé fondé sur votre référence aux avantages en termes de performances, vous recherchez la meilleure vitesse possible de votre application, l'utilisation de jQuery introduit une surcharge chaque fois que vous appelez $(). Si vous optez pour la lisibilité, la cohérence, la compatibilité entre navigateurs, etc., il y a certainement des raisons de préférer jQuery au JavaScript "natif".

60
g.d.d.c

Il y a un cadre appelé ... oh devinez quoi? Vanilla JS . J'espère que vous avez compris la blague ...: D Cela sacrifie la lisibilité du code pour la performance ... En le comparant à jQuery ci-dessous, vous pouvez constater que l'extraction d'un élément DOM par ID est presque 35X plus rapide. :)

Donc, si vous voulez de la performance, vous feriez mieux d'essayer Vanilla JS et de tirer vos propres conclusions. Vous ne rencontrerez peut-être pas JavaScript en bloquant l'interface graphique du navigateur/en bloquant le thread d'interface utilisateur pendant le code intensif, comme dans une boucle for.

Vanilla JS est un framework multiplateforme rapide et léger permettant de créer des applications JavaScript incroyables et puissantes.

Sur leur page d'accueil, il y a quelques comparaisons de performances:

enter image description here

38
Leniel Maccaferri

Il existe déjà une réponse acceptée mais je pense qu'aucune réponse tapée directement ici ne peut être exhaustive dans sa liste de méthodes/attributs javascript natifs qui a pratiquement garanti la prise en charge multi-navigateurs. Pour cela, je vous redirige en mode quirksmode:

http://www.quirksmode.org/compatibility.html

C'est peut-être la liste la plus complète de ce qui fonctionne et de ce qui ne fonctionne sur aucun navigateur. Portez une attention particulière à la section DOM. C'est beaucoup à lire, mais le but n'est pas de tout lire, mais de l'utiliser comme référence.

Quand j'ai commencé à écrire sérieusement des applications Web, j'ai imprimé toutes les tables du DOM et les ai accrochées au mur afin que je sache en un coup d'œil ce qui est sûr à utiliser et ce qui nécessite des piratages. Ces jours-ci, je viens de google quelque chose comme quirksmode parentNode compatibility quand j'ai des doutes.

Comme n'importe quoi d'autre, le jugement est principalement une question d'expérience. Je ne vous recommanderais pas vraiment de lire l'intégralité du site et de mémoriser tous les problèmes afin de déterminer quand utiliser jQuery et quand utiliser JS. Juste être au courant de la liste. C'est assez facile à chercher. Avec le temps, vous développerez l’instinct de savoir quand le JS simple est préférable.

PS: PPK (l'auteur du site) a également un très beau livre que je recommande de lire

17
slebetman

Quand:

  1. vous savez que ce que vous faites est supporté sans faille par tous les navigateurs, et
  2. ce n'est pas beaucoup plus de code à taper, et
  3. il n'est pas beaucoup moins lisible, et
  4. vous êtes raisonnablement convaincu que jQuery ne choisira pas d'implémentations différentes en fonction du navigateur pour obtenir de meilleures performances, alors:

utiliser JavaScript. Sinon, utilisez jQuery (si vous le pouvez).

Edit: Cette réponse s'applique à la fois lorsque vous choisissez d'utiliser jQuery dans son ensemble ou de le laisser de côté, ainsi que d'utiliser ou non Vanilla JS dans jQuery. Choisir entre attr('id') et .id Penche en faveur de JS, tandis que choisir entre removeClass('foo') contre .className = .className.replace( new Regexp("(?:^|\\s+)"+foo+"(?:\\s+|$)",'g'), '' ) penche en faveur de jQuery.

14
Phrogz

Les réponses des autres se sont concentrées sur la vaste question de "jQuery vs. plain JS". À en juger par votre PO, je pense que vous vous demandiez simplement quand il est préférable d’utiliser Vanilla JS si vous avez déjà choisi d’utiliser jQuery. Votre exemple est un exemple parfait du moment où vous devriez utiliser Vanilla JS:

$(this).attr('id');

Est-il à la fois plus lent et (à mon avis) moins lisible que:

this.id.

C'est plus lent parce que vous devez créer un nouvel objet JS simplement pour récupérer l'attribut de la manière jQuery. Maintenant, si vous allez utiliser $(this) pour effectuer d'autres opérations, alors stockez cet objet jQuery dans une variable et utilisez-le. Cependant, j'ai souvent eu besoin d'un attribut de l'élément (comme id ou src).

Existe-t-il d'autres pratiques courantes comme celle-ci? Là où certaines opérations Javascript pourraient être accomplies plus facilement, sans faire intervenir jQuery. Ou est-ce un cas rare? (d'un "raccourci" jQuery nécessitant plus de code)

Je pense que le cas le plus courant est celui que vous décrivez dans votre message. les gens encapsulant $(this) dans un objet jQuery inutilement. Je le vois le plus souvent avec id et value (au lieu de $(this).val()).

Edit: Ici est un article qui explique pourquoi en utilisant jQuery dans le attr() la casse est plus lente. Confession: volé le tag wiki, mais je pense que cela vaut la peine d'être mentionné pour la question.

Modifiez à nouveau: Etant donné les implications d'un accès direct aux attributs pour la lisibilité/la performance, je dirais qu'une bonne règle empirique est probablement d'essayer d'utiliser this.<attributename> Lorsque cela est possible. Il y a probablement des cas où cela ne fonctionnera pas à cause des incohérences du navigateur, mais il est probablement préférable d'essayer d'abord et de faire appel à jQuery si cela ne fonctionne pas.

13
Andrew Whitaker

Si vous êtes principalement préoccupé par la performance, votre exemple principal va droit au but. Invoquer jQuery inutilement ou de manière redondante est, à mon humble avis, la deuxième cause principale de ralentissement des performances (la première étant une mauvaise traversée du DOM).

Ce n'est pas vraiment un exemple de ce que vous recherchez, mais je vois cela souvent qu'il vaut la peine de mentionner: L'un des meilleurs moyens d'accélérer les performances de vos scripts jQuery est de mettre en cache des objets jQuery, et/ou utiliser le chaînage:

// poor
$(this).animate({'opacity':'0'}, function() { $(this).remove(); });

// excellent
var element = $(this);
element.animate({'opacity':'0'}, function() { element.remove(); });

// poor
$('.something').load('url');
$('.something').show();

// excellent
var something = $('#container').children('p.something');
something.load('url').show();
10
Stephen

J'ai trouvé qu'il y avait certainement un chevauchement entre JS et JQ. Le code que vous avez montré est un bon exemple de cela. Franchement, la meilleure raison d'utiliser JQ over JS est simplement la compatibilité avec les navigateurs. Je me penche toujours vers JQ, même si je peux accomplir quelque chose dans JS.

8
Dutchie432

C’est mon point de vue personnel, mais comme jQuery est un script JavaScript de toute façon, je pense qu’en théorie, il ne peut jamais être aussi performant que Vanilla JS.

Mais, dans la pratique, il peut être plus performant que JS écrit à la main, car son code écrit à la main peut ne pas être aussi efficace que jQuery.

En bout de ligne - pour les petites choses, j'ai tendance à utiliser Vanilla JS, pour les projets intensifs en JS, j'aime utiliser jQuery sans réinventer la roue - c'est aussi plus productif.

6
CodeVirtuoso

La liste des propriétés actives de la première réponse, this en tant qu'élément DOM, est assez complète.

Vous trouverez peut-être aussi intéressant d’en connaître d’autres.

Quand c'est le document:

  • this.forms pour obtenir un HTMLCollection des formes actuelles du document,
  • this.anchors pour obtenir un HTMLCollection de tous les HTMLAnchorElements avec name en cours de définition,
  • this.links pour obtenir un HTMLCollection de tous les HTMLAnchorElements avec href en cours de définition,
  • this.images pour obtenir un HTMLCollection de tous les HTMLImageElements
  • et la même chose avec les applets obsolètes comme this.applets

Quand vous travaillez avec document.forms, document.forms[formNameOrId] obtient le formulaire ainsi nommé ou identifié.

Quand c'est un formulaire:

  • this[inputNameOrId] pour obtenir le champ ainsi nommé ou identifié

Lorsqu'il s'agit d'un champ de formulaire:

  • this.type pour obtenir le type de champ

Lors de l’apprentissage des sélecteurs jQuery, nous ignorons souvent l’apprentissage des propriétés d’éléments HTML déjà existantes, qui sont très rapides à accéder.

3
lib3d

Comme d'habitude, j'arrive en retard à cette fête.

Ce n’est pas la fonctionnalité supplémentaire qui m’a décidé à utiliser jQuery, aussi attrayant que cela puisse être. Après tout, rien ne vous empêche d’écrire vos propres fonctions.

C'était le fait qu'il y avait tellement de trucs à apprendre lors de la modification du DOM pour éviter les fuites de mémoire (je parle de vous IE). Avoir une ressource centrale qui gère pour moi tout ce genre de problèmes, écrite par des personnes qui étaient bien meilleurs codeurs JS que je ne le serai jamais, qui était continuellement examinée, révisée et testée était dieu.

Je suppose que cela relève de l'argument de support/abstraction inter-navigateurs.

Et bien sûr, jQuery n’empêche pas l’utilisation de JS droit lorsque vous en avez besoin. J'ai toujours senti que les deux semblaient fonctionner parfaitement ensemble.

Bien sûr, si votre navigateur n'est pas pris en charge par jQuery ou si vous prenez en charge un environnement bas de gamme (ancien téléphone?), Un fichier .js volumineux peut poser problème. Rappelez-vous quand jQuery était minuscule?

Mais normalement, la différence de performance n'est pas un sujet de préoccupation. Il faut seulement être assez rapide. Alors que les gigahertz de cycles de processeur perdent chaque seconde, je suis davantage préoccupé par les performances de mes codeurs, les seules ressources de développement dont le pouvoir ne double pas tous les 18 mois.

Cela dit, je suis en train d’examiner les problèmes d’accessibilité et apparemment .innerHTML est un peu un non non. jQuery dépend bien sûr de .innerHTML, donc je cherche maintenant un cadre qui dépendra des méthodes un peu fastidieuses autorisées. Et je peux imaginer qu'un tel framework fonctionnera plus lentement que jQuery, mais tant qu'il fonctionnera assez bien, je serai heureux.

2
Swanny

Voici une réponse non technique: de nombreux travaux peuvent ne pas autoriser certaines bibliothèques, telles que jQuery.

En fait, en fait, Google n'autorise pas jQuery dans son code (ni React, car il appartient à Facebook), ce que vous ne saviez peut-être pas jusqu'à ce que l'intervieweur dise "Désolé, mais vous ne pouvez pas utiliser jQuery, il n'est pas activé. la liste approuvée chez XYZ Corporation ". Vanilla JavaScript fonctionne absolument partout, à chaque fois, et ne vous posera jamais ce problème. Si vous comptez sur une bibliothèque, oui, vous obtenez vitesse et facilité, mais vous perdez l’universalité.

En outre, en ce qui concerne les entretiens, l'autre inconvénient est que, si vous dites que vous devez utiliser une bibliothèque pour résoudre un problème JavaScript lors d'un quiz sur le code, il vous semblera que vous ne comprenez pas réellement le problème, qui est plutôt mauvais. Tandis que si vous le résolvez en JavaScript vanille brut, cela montre que vous comprenez réellement et pouvez résoudre tous les problèmes qu’ils vous posent.

2
Jack Connor

$(this) est différent de this:

En utilisant $(this), vous vous assurez que le prototype jQuery est transmis à l'objet.

1
John Green