jQuery performance, .css ou addClass

J'ai un gros code jQuery et je pense à la performance de mes fonctions. Quand un élément est cliqué (mousedown) j'ai besoin d'assigner une image en arrière-plan. Je peux le faire de 2 façons:jQuery performance, .css ou addClass

$('#element li.class').css({"background":"someimageURL"});

$('#element li.class').addClass("someclass");

où "UneClasse" ont l'image de fond CSS réelle. La fonction de sorcière fonctionne mieux dans ce cas.

Existe-t-il un moyen de tester diverses fonctions de vitesse?

Merci

Source

2010-02-25 Mircea

Je ne pense pas que son sage de substituer l'un à l'autre. L'utilisation de la méthode .css code le style de l'élément DOM et si vous voulez vous en sortir avec le style (par exemple, les changements de résolution d'écran), ce serait vraiment difficile. Cependant, les méthodes .addClass et .removeClass gèrent cela plutôt bien. – thethakuri

Je suis presque certain .addClass() serait le plus rapide des deux. Cela implique essentiellement de virer sur un autre nom de classe à l'élément, alors que l'alternative nécessiterait d'itérer à travers les styles d'éléments et de définir de nombreuses règles explicites.

Définir quelques règles css via $.css() ne devrait pas vous inquiéter, mais si vous vous trouvez en train d'en configurer plusieurs, il est souvent temps de créer une classe et de l'appliquer/de la supprimer si nécessaire.

J'ai extrait la logique des deux méthodes dans un seul emplacement pour que vous puissiez l'examiner si vous le souhaitez.

http://pastie.org/842738

Source

2010-02-25 18:24:14 Sampson

En outre, pas de vitesse/performances liées, il est beaucoup plus facile de changer une classe CSS que le code source JS pour changer un style plus tard;) – casraf

L'implémentation de "addClass" n'est pas aussi sophistiquée que je l'aurais pensé. Il fait beaucoup de re-balayage de la chaîne de classe lors de l'ajout de plusieurs classes. Pour les valeurs className courtes, cela ne pose probablement pas de problème. – Pointy

Thanx Jhonathan. Je vais regarder votre lien. Je pense aussi que addClass est plus rapide. – Mircea

Ajouter une classe est absolument plus rapide, voir ce test de performance de $.addClass() vs vs $.css()$.removeClass().addClass() vs js plaine - http://jsperf.com/jquery-css-vs-addclass-speed/2

Source

2014-01-15 23:09:43

Votre jsperf montre certainement comment la chose la plus importante à faire si vous voulez des performances est d'ignorer la partie jQuery et de la coder directement sur le DOM. Bravo pour répondre à une question de performance avec des mesures réelles! Je ne peux pas croire que la réponse acceptée à cette question a fait zéro mesure réelle. C'est une honte dans mon livre. Vous ne pouvez pas répondre de manière fiable à une question de performance sans mesure. – jfriend00

Répondre

Questions connexes