HasClass() vs. is()

从性能的角度来看,是否有一种首选的方法来确定一个元素是否被赋予了一个类?

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

或者

$('#foo').is('.bar');
47991 次浏览

Both should be pretty close in terms of performance but $('#foo').hasClass('bar'); seems more readable and semantically correct to me.

Update:

I committed a test following a comment and four upvotes to very comment. It turns out that what I had said is the correct answer. Here is the result:

enter image description here

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


The is is multi-purpose, you can for example do is('.class'), is(':checked'), etc which means is has more to do where is hasClass is limited which only checks for a class being set or not.

Hence, hasClass should be faster if performance at any level is your priority.

.hasClass is much faster than .is You can test it from here. Change the test case according to you.

Since is is more generic than hasClass and uses filter to process the provided expression, it seems likely that hasClass is faster.

I ran the following code from the Firebug console:

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();

I got:

  • usingIs: 3191.663ms
  • usingHas: 2362.523ms

Not a huge difference, but may be relevant if you're doing lots of testing.

EDIT when I say 'not a huge difference, my point is that you need to do 10000 cycles in order to see 0.8s of a difference. I'd be surprised to see a web application such that switching from is to hasClass would see a significant improvement in over all performance. However, I grant that this is a 35% improvement in speed.