Optimisation jQuery / Meilleures pratiques

Question

Ok selle de cow-boys, parce que cela va être long. J'ai passé la matinée en passant par certaines de mes vieux code et je me demandais à propos de les meilleures pratiques et optimzation. Afin d'éviter une descente subjective lane, je vais juste poster quelques exemples avec quelques espérons-le, facile de répondre à des questions. Je vais essayer de garder les exemples très simples pour faciliter une réponse et une diminution de la probabilité d'erreurs. Ici, nous allons:

1) la Cession vs jQuery Appels

Je comprends que, lors de l'accès à des sélecteurs il est généralement préférable d'attribuer un sélecteur à une variable plutôt que de faire le même appel plus d'une fois - ex.

$('div#apples').hide();
$('div#apples').show();

vs

var oranges = $('div#oranges');
oranges.show();
oranges.hide();

Cette même règle s'applique lorsque le référencement du jQuery $(this)? Ex. Un peu simple de script pour faire certaines données dans une table cliquable et personnaliser le lien.

$('tr td').each( function() {
    var colNum = $(this).index();
    var rowNum = $(this).parent().index();
    $(this).wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">'); 
})

vs

$('tr td').each( function() {
    var self = $(this);
    var colNum = self.index()
    var rowNum = self.parent().index()
    self.wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">'); 
});

2) this vs $(this)

Ok, donc ce prochain est quelque chose que j'ai demandé à ce sujet depuis longtemps, mais je n'arrive pas à trouver des renseignements sur elle. Veuillez excuser mon ignorance. Quand est-il judicieux d'appeler la vanille js this par opposition à la jQuery enveloppé $(this)? C'est ma compréhension que -

$('button').click(function() {
  alert('Button clicked: ' + $(this).attr('id'));
});

Est beaucoup moins efficace que l'accès au DOM attribut de la vanille this objet comme suit -

$('button').click(function() {
  alert('Button clicked: ' + this.id);
});

Je comprends ce qui s'y passe, Im me demandais si il ya une règle de base à suivre lors de décider de les utiliser.

3) Est plus une spécificité de toujours mieux?

Celui-ci est assez simple, est-il TOUJOURS avantageux d'être plus précis avec nos sélecteurs? Il est facile de voir qu' $('.rowStripeClass') serait beaucoup plus lent que d' $('#tableDiv.rowStripeClass'), mais où allons-nous tracer la ligne? Est - $('body div#tableDiv table tbody tr.rowStripeClass') plus vite encore? Toute entrée serait appréciée!

Si vous avez rendu à ce point, merci de prendre un coup d'oeil! Si vous n'avez pas, :p

Answer 1

Je vais essayer de répondre à ces façon aussi concise que possible:

1. Cache quand il est utilisé souvent, surtout dans une situation de boucle, exécute le même code pour obtenir le même résultat n'est jamais une bonne chose pour les performances, cache en elle.

2. Utiliser this quand vous avez seulement besoin d'un élément du DOM et $(this) quand vous en avez besoin les méthodes jQuery (qui ne serait pas disponible autrement), votre exemple de l' this.id vs $(this).attr("id") est parfait, quelques exemples courants:

   • Utiliser this.checked au lieu de $(this).is(':checked')
   • Utiliser $.data(this, 'thing') au lieu de $(this).data('thing')
   • Tous les autres cas où la création d'un objet jQuery n'est pas utile en fait.

3. Descente à partir d'un sélecteur d'ID est préféré pour la performance...comment spécifiques avez-vous besoin? Qui dépend entièrement, en bref: soyez aussi précis que vous devez être.

Answer 2

1) la Cession vs jQuery Appels

Cette même règle s'applique lorsque le référencement du jQuery $(this)?

Oui, absolument. Un appel à l' $ fonction crée un objet jQuery et avec elle vient les frais généraux associés. Plusieurs appels d' $ avec le même sélecteur permettra de créer un nouvel objet à chaque fois.

2) ce vs $(ce)

Je dirais connaître la différence est importante, car à certains moments, il devient crucial que vous n'avez pas à emballer vos objets avec jQuery. Dans la plupart des cas, vous n'auriez pas envie de faire de l'optimisation prématurée et juste pour garder les choses cohérentes, toujours envelopper de $(this), et de préférence cache dans une variable. Cependant, considérer cet exemple extrême d'une liste non ordonnée <ul> qui contient un million d' <li> éléments:

$("#someList  li").each(function() {
    var id = $(this).attr('id');
});

Un million de nouveaux objets seront créés qui entraînera une diminution importante de la performance, quand vous pourriez avoir fait sans créer de nouveaux objets à tous. Pour les attributs et les propriétés qui sont compatibles sur tous les navigateurs, vous pouvez y accéder directement, sans l'enveloppant dans jQuery. Cependant, pour ce faire, essayez de vous limiter à des cas où beaucoup d'éléments sont en cours de traitement.

3) Est plus une spécificité de toujours mieux?

Pas toujours. Il dépend essentiellement de navigateurs, et encore, pas la peine de fouiller dans les micro-optimisations sauf si vous savez que quelque chose est en cours d'exécution plutôt lent dans votre application. Par exemple:

$("#someElement") vs $("#someElement", "#elementsContainer")

Il peut sembler que puisque nous sommes également fournir un contexte où la recherche d'un élément par son id, que la deuxième requête va être plus rapide, mais c'est le contraire. La première requête se traduit par un appel direct à l'indigène getElementById(..) , alors que le second n'a pas de raison de le sélecteur de contexte.

Aussi, certains navigateurs peuvent fournir une interface pour accéder à des éléments par nom de classe à l'aide de getElementsByClassName et jQuery peut-être l'utiliser pour les navigateurs pour des résultats plus rapides, dans ce cas fournir un plus spécifiques sélecteur tels que:

$("#someElement.theClass")

pourrait en fait être un obstacle que de simplement écrire:

$(".theClass")

Answer 3

Ce blog n'est pas trop daté, mais il fournit quelques réponses à vos questions ainsi que donne un peu plus d'info sur la vitesse de votre site lors de l'utilisation de jquery: http://www.artzstudio.com/2009/04/jquery-performance-rules/

L'un de mes favoris est le numéro six, dont les états de limiter la manipulation du DOM. C'est toujours une mauvaise chose à faire .ajouter dans une boucle for, puisqu'à chaque fois que vous ajoutez les DOM, ce qui est une opération coûteuse.

Answer 4

Jusqu'à vos questions:

1. Mise en cache de l'objet jQuery doit fournir les meilleures performances. Elle permettra d'éviter DOM recherches, qui est ce qui peut devenir lent lorsqu'il est effectué à de nombreuses reprises. Vous pouvez bénéficier de jQuery chaînage - parfois, il n'est pas nécessaire pour une variable locale.
2. Il en va de même avec $(this) lors de l' this est un élément du DOM. Malgré le fait que c'est le moyen le plus rapide pour obtenir un objet jQuery, il est encore plus lent que la mise en cache. Si la vanille élément du DOM suffirait - alors il ne faut pas appeler jQuery à tous. L'exemple avec l'attribut id est excellente - le préférez.id de $(this).attr('id) si vous n'allez pas avoir besoin de $(ce)
3. Plus spécifique sélecteurs va diminuer le DOM de recherche de temps en effet. Cependant il y a en effet une ligne doit être tracée - faire les sélecteurs plus spécifiques uniquement si vous êtes sûr à 100% ce qui permettrait d'améliorer les performances de manière perceptible.

Answer 5

Le seul cas, vous devez garder un œil sur votre sont des boucles et des événements. Parce que chaque action que vous faites dans l'une de ces sera fait à chaque itération ou lors de chaque événement.

1. Affectation vs jQuery Appels

   Votre exemple n'est pas le meilleur. L'endroit où vous devez sauver des références à des objets jQuery sont ceux utilisés dans les boucles ou les événements, ou qui sont les résultats de requêtes complexes.

2. ce vs $(ce)

   De nouveau dans les performances critiques situations brut dom , c'est mieux. Autre que celui que vous choisissez ce qui est plus courte ou plus lisible. Surprise, surprise, il n'est pas toujours jQuery.

3. Est plus la spécificité de toujours mieux?

   Il existe plusieurs types de spécificité qui sont généralement confus par les gens. L'un d'entre eux est inutile - qui, par exemple: un nom de balise pour un sélecteur d'id tag#id, il sera plus lent qu'un simple id. Mais il existe un autre type, quand il sera un énorme avantage pour être précis. Maintenant, ce type dépend du navigateur, parce que le moderne se sacrifier pour les anciens, mais c'valeurs du commerce de Ce qui se passe lorsque vous spécifiez un tag d'un class tag.class. Dans IE 6-7, il sera nettement plus rapide qu'un simple .class, parce que le grésillement peut faire usage de la fast document.getElementsByTagName fonction. Maintenant, un autre type est lorsque vous spécifiez trop ancêtres. Cela va ralentir les choses dans tous les navigateurs. C'est parce que le sélecteur est exécuté à partir de la droite vers la gauche. La règle à garder à l'esprit: toujours le plus à droite du sélecteur précis que possible.