Pourquoi la fonction sélecteur jQuery est-elle si lente par rapport aux méthodes DOM natives?

Je sais que ce sujet a été débattu en général plusieurs fois déjà, mais je suis à la recherche d'un aperçu plus technique et plus détaillé pour comprendre ce qui se passe réellement.

J'ai conçu une série de tests pour comparer la vitesse de #id 'et' .class 'des sélecteurs les plus bas de jQuery à diverses méthodes DOM natives.

  • Où sont les constructeurs tels que `new Image ()` et `new Option ()`, documentés?
  • "Accès refusé" Erreur JavaScript lors de l'accès à l'objet de document d'un <iframe> créé par programme (IE-only)
  • Chargez javascript async, puis vérifiez DOM chargé avant d'exécuter le rappel
  • Attendez que l'iframe soit chargé en JavaScript
  • Manipuler innerHTML supprime le gestionnaire d'événements d'un élément enfant?
  • Javascript: trouvez des chaînes dans dom et mettez l'accent sur
  • Ce que je souhaite, c'est savoir exactement pourquoi les résultats sont ce qu'ils sont.

    Voici les tests: http://jsperf.com/jqueryspeed

    La principale chose remarquable, c'est que getElementById est clairement le plus rapide de tous. Pour comparer, j'ai ajouté jQuery ('# id') et jQuery.fn.init ('# id') en tant que tests, la différence entre les deux est que le premier instancie un tout nouvel objet jQuery, tandis que le second Ne fonctionne que la fonction prototype, et est donc plus rapide. Donc, la différence entre ces deux est compréhensible.

    La principale différence que je ne comprends pas, cependant, est l'énorme écart entre la vitesse de getElementById et la vitesse de jQuery.fn.init, qui a un test simple pour gérer une requête simple ('#id') d'une manière spécifique, Retournant à un appel pour obtenir ElementById lui-même.

    Alors, pourquoi, par exemple, sur Chrome, cette méthode est-elle environ 8 fois plus lente que la native, même si ce n'est que d'une manière simple, il s'agit simplement d'une enveloppe?

    Il est également environ 3-4 fois plus lent que le getElementById enveloppé $ (document.getElementById ('# id')) …

    Des idées, s'il vous plaît?

  • Liste des classes CSS connues à l'aide de Javascript
  • Safari: les DIV absolument positionnés ne se déplacent pas lorsqu'ils sont mis à jour via DOM
  • Remplissez le nom d'utilisateur et le mot de passe dans une page Web à l'aide de VBA
  • Définir l'attribut id d'un élément d'entrée dynamiquement dans IE: alternative pour la méthode setAttribute
  • Événement Mutation DOM dans JQuery ou vanilla Javascript
  • Ouvrez une nouvelle fenêtre sans vous concentrer sur
  • 3 Solutions collect form web for “Pourquoi la fonction sélecteur jQuery est-elle si lente par rapport aux méthodes DOM natives?”

    C'est la quantité de code que jquery parcourt lorsque nous utilisons un simple $ ('selector')

    http://james.padolsey.com/jquery/#v=1.10.2&fn=init

    Comme vous pouvez le voir, il y a beaucoup de validation, des matchs de regex, des astuces de navigateur croisées, etc.

    Il est important de réaliser que jquery est une bibliothèque créée sur javascript.Javascript s'exécute directement sur le navigateur. Lorsque jquery traite beaucoup de code javascript avant d'être exécuté par le navigateur.

    Personnellement, je préfère jquery. Je ne suis vraiment pas gêné de sauver ces nano seconds.Le niveau de simplicité que jquery fournit est phénoménal et une pièce d'art en soi.

    Il n'y a rien que jQuery puisse faire aussi rapidement que DOM natif et c'est pour une raison: il est difficile de rendre votre code compatible avec le navigateur. Ensuite, il va construire un objet jQuery hors de la plupart des appels de méthodes. En fait, jQuery sera beaucoup plus lent, peu importe ce que vous faites.

    Comparons ces deux appels "similaires":

    document.getElementById("box") : la méthode native itère sur les éléments DOM à un niveau inférieur à celui de JavaScript. Une fois la recherche effectuée, elle renvoie l'élément DOM qui est déjà chargé en mémoire. L'une des méthodes les plus rapides.

    $('#box') : ici, jQuery commencera par une analyse par rapport à ce que vous lui demandez de faire. Par exemple, il valide qu'il s'agit d'un sélecteur bien formé, puis essayez de reconnaître quel type de sélecteur il est. Une fois qu'il a terminé, il essaiera d'obtenir l'élément avec ID "box". Ensuite, il va commencer à créer un objet jQuery, remplissant chaque attribut de manière à ne pas comprendre les anciens navigateurs. Cela inclut beaucoup de tests de recharge et de conformité. Lorsque l'objet est prêt à l'emploi, vous obtenez l'élément avec une "case" d'ID.


    MISE À JOUR – 15/02/17:

    Avec jQuery> = 2.0 n'ayant plus de soutien pour l'infâme IE 6/7/8, certains tests de compatibilité ne sont plus nécessaires, ce qui rend jQuery plus léger et plus rapide. La performance globale peut être améliorée en utilisant jQuery> = 2.0 au lieu de 1.x si vous ne devez pas supporter d'anciens navigateurs.

    J'ai ajouté un autre cas de test pour jQuery.fn.init(document.getElementById('id')) qui était plus rapide que la plupart des autres méthodes, car il ne analyse ni chaîne ni crée un nouvel objet jQuery (il était environ 50% derrière getElementById, Jsperf ), et quand je vois la source du code jquery qui s'exécute pendant jQuery.fn.init appel:

     function (selector, context, rootjQuery){ if (selector.nodeType) { this.context = this[0] = selector; this.length = 1; return this; } } 

    Je ne peux que conclure que les ingénieurs de Chrome et Firefox ont fait très bon travail pour optimiser les opérations DOM natives.

    JavaScript rend le site Web intelligent, beauté et facile à utiliser.