Quels sont des conseils rapides pour augmenter la performance de JQuery?
9 Réponses :
Fichiers de référence sur CDN de Google afin qu'ils se charge plus rapidement.
Ce n'est pas vraiment la performance jQuery, n'est-ce pas?
Ne s'appliquerait pas si vous développez sur un intranet (les utilisateurs sont dans le même bâtiment). Le stocker sur votre propre serveur sauveriez-leur un voyage sur Internet.
@Nathan sur un intranet, ce serait le genre de chose à stocker sur un proxy et ainsi sauve-leur un voyage aussi, mais prenez votre point et certains endroits n'auraient pas de proxy
Paul Irish a récemment présenté la performance à la conférence JQuery 2009. Les diapositives sont parmi les plus complètes que j'ai vues.
http://paulirish.com/perf/
http://www.slideshare.net/paul.irish/perfCompression
plutôt que de faire: vous pouvez faire:
Est-ce que cela augmente vraiment la performance? C'est tellement kewl.
Ou si vous ne pouvez pas tout faire à la fois, placez $ («# foo») dans une variable et utilisez plutôt que de recréer $ («# foo») à chaque fois.
@JPartogi: JQuery crée un nouvel objet chaque fois que vous passez un sélecteur en $ () mais parce que ses méthodes renvoient ceci vous pouvez les empiler comme ça. L'astuce ici est de ne pas créer trois objets différents pour le même sélecteur.
Il n'est pas vraiment possible d'augmenter la vitesse de jQuery, cela dépend vraiment de la manière dont votre code est efficace, quelle est la efficacité de l'interprète JS du navigateur et de la rapidité avec laquelle l'ordinateur exécute le code. Vous pourriez peut-être essayer de réécrire JQuery pour le rendre plus efficace, mais cela va prendre du temps et il est probablement déjà assez optimisé.
Vrai si vous regardez des améliorations drastiques de la vitesse. Cependant, il existe de simples astuces qui font une meilleure exécution, même si sa seulement 100 millisecondes.
L'un des meilleurs moyens d'assurer l'efficacité est de vous assurer que le * sélecteur ciblait l'élément / la classe, etc., aussi spécifique que possible.
* $ (sélecteur)
Rechercher pour trouver des éléments dans la portée des enfants d'éléments. Ce n'est vraiment optimal que si vous effectuez des opérations sur l'ancêtre commun de toute façon; Sinon, les frais généraux de la recherche de l'ancêtre et de la mise en cache peuvent l'emporter sur l'avantage de la traversée scopée.
- n'utilise pas
$. Chaque () , Utilisez pour (;;) . C'est plus de dix fois plus vite.
Cela aurait dû être la réponse acceptée. +1
Pouvez-vous donner un exemple de (;;)?
Voici une version basée sur (;;) de l'un des exemples pour $. Cherchez () de la documentation de JQuery [ docs.jquery.com/uties/jquery.each ]: Pour (var i = 0; i
Bien sûr, nous savons tous une décrémentation tandis que la boucle peut accomplir encore plus vite que cela! La beauté de chacun est le contexte dans lequel la fonction est appelée (par exemple, ceci === votre élément).
Bons points, alex. Je viens d'apprendre à propos de la décrémentation tandis que l'optimisation de la boucle. Outre les cosmétiques, quel avantage existe avec 'Ceci'?
Ses surtout simplement pour la facilité d'utilisation, le contexte est un moyen facile de maintenir la cohérence. Plus important encore, chaque () est toujours chaînéable, qui est la clé de l'API de JQuery.
Grand point sur la chalinabilité.
Ça demande toujours à JavaScript commun: toujours var $this = $(this);
$this.css('width', parseInt($this.css('width')) + 20 + 'px');
SAVOIR quand utiliser la nature JavaScript à la place des méthodes de JQuery. strong> jQuery est un ajout à JS + DOM, et non un remplacement complet de celui-ci. Vous n'avez pas à utiliser JQuery pour chaque ligne de code que vous écrivez. Certaines choses sont plus succinctement exprimées sans cela; Beaucoup de choses sont plus rapides sans cela. Apprenez ce que le DOM est disponible pour que vous ne finissez pas par écrire certains des exemples Sillier que j'ai vu postés ici. P> EG.: P> var ix= document.getElementById(selectname).selectedIndex;
Cela peut être condensé à: $ ('# certainement'). Trouver (Option: sélectionnée ');
Je pense que vous demandez une optimisation du code, mais étant donné que la performance dépend fortement du moteur JavaScript utilisé, j'aimerais mentionner Google Chrome Cadre .
L'achat d'un nouvel ordinateur serait la manière évidente :-)
Je pense que vous trouverez plusieurs doublons à cette question en utilisant la recherche.
nouvel ordinateur!! : D, suggère-lui aussi un système d'exploitation: D
Mettez des bandes de course sur le côté de votre PC, qui aide toujours.
Stackoverflow.com/questions/182630/JQUERY-TIS-AND-RICKS
Et peignez-le rouge! Les rouges sont les plus rapides!
Duplicates - Stackoverflow.com/questions/1405676/ ... , Stackoverflow.com/questions/1411143/jquérie-selector-performa Nce , Stackoverflow.com/Questtions/46214/... En fait, il y a beaucoup plus de recherches avec des mots-clés "jquery" et "performance"
@Johannes, vous devrez acheter un nouvel ordinateur à chacun de vos utilisateurs ...
Lequel est plus rapide, celui avec Rayures de course ou celui qui est peint rouge . : o. Sera-ce beaucoup plus rapide si Monu aura un nouvel ordinateur avec des rayures rouges et blanches? : o.
Le bouton Jenson utilise (;
lolz .. gars j'ai peint mon système wid black n bandes blanches. ça ne marche toujours pas :)