更快的方法来确定一个类的元素是否存在？

Question

说明：

我试图找出一种方法来检查是否存在具有特定类的元素。

1. 然后我遇到了这段代码：

   if ($(".mydivclass")[0])
   {
      // Do something if class exists
   } 
   else 
   {
      // Do something if class does not exist
   }
   

   这表明如果first ([0]) 索引处存在真值，则假定类存在。

2. 现在我又可以找到另一个解决方案，例如：

   if ($(".mydivclass").size())
   {
        // code here
   }
   

   size() 方法只返回 jQuery 选择器选择的元素的数量 - 在本例中是类 mydivclass 的元素数量。如果返回0，则表达式为假，因此没有，如果返回任何其他数字，则div必须存在。

所以我的问题在于，这两个中哪个更快？

Answer 1

$('.mydivclass')[0] 是最快的方式。

来源：

性能测试：

http://jsperf.com/check-if-div-exists

相关问题：

Check if div with certain class name exists

Answer 2

所以我也很好奇，针对以下5种方法做了一些测试：

1. $('.className')[0]
2. $('.className').size()
3. $('.className').length
4. document.querySelector('.className')
5. document.getElementsByClassName('className')[0]

我的脚本：

var testCount = 100000;
var cn = 'container';
var cns = '.'+cn;
console.time('[0]');
for(var i=testCount;i>0;i--){
    if($(cns)[0]){};
}
console.timeEnd('[0]');

console.time('.size');
for(var i=testCount;i>0;i--){
    if($(cns).size()){};
}
console.timeEnd('.size');

console.time('.length');
for(var i=testCount;i>0;i--){
    if($(cns).length){};
}
console.timeEnd('.length');

console.time('querySelector');
for(var i=testCount;i>0;i--){
    if(document.querySelector(cns)){};
}
console.timeEnd('querySelector');

console.time('classname');
for(var i=testCount;i>0;i--){
    if(document.getElementsByClassName(cn)[0]){};
}
console.timeEnd('classname');

我在这个页面中进行测试，只是粘贴代码并在 chrome 控制台中运行它。事实证明，前 3 种方法的性能相似，仅相差

querySelector 方法在类存在时很快，但在类不存在时最慢......不知道为什么会这样。

getElementsByClassName方法最快，只需要前3个方法的1/10。

这是结果之一：

[0]: 2168.198ms 
.size: 1951.075ms 
.length: 1936.117ms 
querySelector: 672.186ms 
classname: 242.048ms 

为了回答你的问题，我认为两者并没有真正的更快的，为此目的都慢......