jQuery .hasClass () contre .is ()

Question 1

Existe-t-il une méthode préférée pour déterminer si une classe est attribuée à un élément, du point de vue des performances?

$('#foo').hasClass('bar');

ou

$('#foo').is('.bar');

Question 2

Mettre à jour:

J'ai commis un test après un commentaire et quatre votes positifs pour très commenter. Il s'avère que ce que j'avais dit est la bonne réponse. Voici le résultat:

entrez la description de l'image ici

http://jsperf.com/hasclass-vs-is-so

Le isest polyvalent, vous pouvez par exemple faire is('.class'), is(':checked')etc qui des moyens isa plus à voir où est hasClassest limitée , ce qui ne vérifie que pour une classe ou non être ensemble.

Par conséquent, cela hasClassdevrait être plus rapide si la performance à n'importe quel niveau est votre priorité.

Question 3

Étant donné qu'il isest plus générique que hasClasset utilise filterpour traiter l'expression fournie, il semble probable que ce hasClasssoit plus rapide.

J'ai exécuté le code suivant à partir de la console Firebug:

function usingIs() {
for (var i=0; i<10000;i++) {
 $('div#example-0').is('.test');
}
}

function usingHas(){
for (var i=0; i<10000;i++) {
 $('div#example-0').hasClass('test');
}
}

usingIs();
usingHas();

J'ai eu:

usingIs: 3191,663ms
usingHas: 2362.523ms

Ce n'est pas une énorme différence, mais cela peut être pertinent si vous faites beaucoup de tests.

EDIT quand je dis «pas une énorme différence, mon point est que vous devez faire 10000 cycles pour voir 0,8 s de différence. Je serais surpris de voir une application Web telle que le passage de isà hasClasspermettrait une amélioration significative des performances globales. Cependant, j'accorde que c'est une amélioration de 35% de la vitesse.

Question 4

Les deux devraient être assez proches en termes de performances mais $('#foo').hasClass('bar');me semblent plus lisibles et sémantiquement corrects.

Question 5

.hasClassest beaucoup plus rapide que .is vous ne pouvez le tester à partir d' ici . Changez le scénario de test selon vous.

Answer 1

96

Existe-t-il une méthode préférée pour déterminer si une classe est attribuée à un élément, du point de vue des performances?

$('#foo').hasClass('bar');

ou

$('#foo').is('.bar');

jquery Omer Bokhari
la source

6

Vous pouvez toujours valider les performances sur ce site ainsi que sur plusieurs navigateurs: jsperf.com ... Voici quelques cas de test à parcourir: jsperf.com/browse

iwasrobbed

Answer 2

6

Vous pouvez toujours valider les performances sur ce site ainsi que sur plusieurs navigateurs: jsperf.com ... Voici quelques cas de test à parcourir: jsperf.com/browse

iwasrobbed

Answer 3

164

Mettre à jour:

J'ai commis un test après un commentaire et quatre votes positifs pour très commenter. Il s'avère que ce que j'avais dit est la bonne réponse. Voici le résultat:

entrez la description de l'image ici

http://jsperf.com/hasclass-vs-is-so

Le isest polyvalent, vous pouvez par exemple faire is('.class'), is(':checked')etc qui des moyens isa plus à voir où est hasClassest limitée , ce qui ne vérifie que pour une classe ou non être ensemble.

Par conséquent, cela hasClassdevrait être plus rapide si la performance à n'importe quel niveau est votre priorité.

Sarfraz
la source

7

Avez-vous la preuve que c'est plus rapide? Ce n'est PAS parce qu'une fonction a moins de fonctionnalités qu'elle est automatiquement plus rapide.

Kris le

15

@Kris: Oui, je le fais: jsperf.com/hasclass-vs-is-so . Comme je l'ai dit, hasClass c'est beaucoup plus rapide.

Sarfraz

4

'beaucoup plus rapide' => 'beaucoup plus rapide'

Kirk Strobeck

@SgtPooki, je demandais simplement une preuve; si c'était vrai, je voulais savoir pourquoi. Je suis curieux comme ça :). Vous pouvez facilement avoir plus de fonctionnalités et les rendre plus rapides; cela dépend toujours de la mise en œuvre. Votre 99% est une généralisation globale et pas nécessairement le véritable état du développement logiciel. Votre question "jQuery sera-t-il un jour aussi rapide que du JavaScript? Une réponse autre que non est fausse." n'est pas une bonne question; jQuery a en fait de nombreuses optimisations qui fourniront un accès plus rapide aux éléments DOM une fois les données mises en cache; cela dépend vraiment de votre utilisation spécifique.

Kris

1

@SgtPooki aussi vite que possible, jetez un œil au moteur de sélection de grésillement; comme je continue de le mentionner, cela dépend de la mise en œuvre et dans les navigateurs plus anciens qui ne prennent pas en charge les requêtes de manière native, il sera probablement plus rapide grâce à l'implémentation de jQuery car il n'y a pas de version native (win par défaut). De plus, si vous continuez à rappeler les mêmes éléments DOM, en fonction du navigateur et de la version, cela peut prendre du temps supplémentaire car jQuery peut mettre en cache cet élément pour une récupération plus rapide. Les fonctions JavaScript natives sont généralement plus rapides; mais cela dépend de la prise en charge et de la mise en œuvre du navigateur.

Kris

Answer 4

7

Avez-vous la preuve que c'est plus rapide? Ce n'est PAS parce qu'une fonction a moins de fonctionnalités qu'elle est automatiquement plus rapide.

Kris le

Answer 5

15

@Kris: Oui, je le fais: jsperf.com/hasclass-vs-is-so . Comme je l'ai dit, hasClass c'est beaucoup plus rapide.

Sarfraz

Answer 6

4

'beaucoup plus rapide' => 'beaucoup plus rapide'

Kirk Strobeck

Answer 7

@SgtPooki, je demandais simplement une preuve; si c'était vrai, je voulais savoir pourquoi. Je suis curieux comme ça :). Vous pouvez facilement avoir plus de fonctionnalités et les rendre plus rapides; cela dépend toujours de la mise en œuvre. Votre 99% est une généralisation globale et pas nécessairement le véritable état du développement logiciel. Votre question "jQuery sera-t-il un jour aussi rapide que du JavaScript? Une réponse autre que non est fausse." n'est pas une bonne question; jQuery a en fait de nombreuses optimisations qui fourniront un accès plus rapide aux éléments DOM une fois les données mises en cache; cela dépend vraiment de votre utilisation spécifique.

Kris

Answer 8

1

@SgtPooki aussi vite que possible, jetez un œil au moteur de sélection de grésillement; comme je continue de le mentionner, cela dépend de la mise en œuvre et dans les navigateurs plus anciens qui ne prennent pas en charge les requêtes de manière native, il sera probablement plus rapide grâce à l'implémentation de jQuery car il n'y a pas de version native (win par défaut). De plus, si vous continuez à rappeler les mêmes éléments DOM, en fonction du navigateur et de la version, cela peut prendre du temps supplémentaire car jQuery peut mettre en cache cet élément pour une récupération plus rapide. Les fonctions JavaScript natives sont généralement plus rapides; mais cela dépend de la prise en charge et de la mise en œuvre du navigateur.

Kris

Answer 9

Étant donné qu'il isest plus générique que hasClasset utilise filterpour traiter l'expression fournie, il semble probable que ce hasClasssoit plus rapide.

J'ai exécuté le code suivant à partir de la console Firebug:

function usingIs() {
for (var i=0; i<10000;i++) {
 $('div#example-0').is('.test');
}
}

function usingHas(){
for (var i=0; i<10000;i++) {
 $('div#example-0').hasClass('test');
}
}

usingIs();
usingHas();

J'ai eu:

usingIs: 3191,663ms
usingHas: 2362.523ms

Ce n'est pas une énorme différence, mais cela peut être pertinent si vous faites beaucoup de tests.

EDIT quand je dis «pas une énorme différence, mon point est que vous devez faire 10000 cycles pour voir 0,8 s de différence. Je serais surpris de voir une application Web telle que le passage de isà hasClasspermettrait une amélioration significative des performances globales. Cependant, j'accorde que c'est une amélioration de 35% de la vitesse.

Answer 10

9

Les deux devraient être assez proches en termes de performances mais $('#foo').hasClass('bar');me semblent plus lisibles et sémantiquement corrects.

Darin Dimitrov
la source

Answer 11

7

.hasClassest beaucoup plus rapide que .is vous ne pouvez le tester à partir d' ici . Changez le scénario de test selon vous.

Gaurav
la source

jQuery .hasClass () contre .is ()

Réponses:

Mettre à jour: