$('div+.ab')和$('.ab+div') 哪个效率高?

Question

看到一个面试题第31题如题
我很费解!望大神指点迷津！
这个题目想考察啥？
1.创建节点？
2.获取节点？
3.可比性在哪？
4.真比较出高低的？说说高在哪？

Answer 1

权当本题考查jQuery 选择器效率。
参考jQuery 选择器效率
得出答案：$('div+.ab') 效率高。勉强蒙混过关~
经 Xeira 提醒 亲测代码如下：

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    console.time("test_ab");
    for(var i=0;i<10000;i++){ $('.ab+div')}
    console.timeEnd("test_ab");
    
/*
    console.time("text_div");
    for(var i=0;i<100000;i++){ $('div+.ab').html()}
    console.timeEnd("text_div");
*/

</script>

结果,真不知道哪个效率高了

Answer 2

第二个高，第一个先div再查class遍历的dom更多

Answer 3

$('div+.ab')和$('.ab+div')
当然是$('.ab+div')的查询速度更快。从特定的class类到普通dom元素。

Answer 4

选择器越精确效率越高

Answer 5

当然第二个高
原因吗 class选择时仅次于id的 但是绝对比标签高
所以先找到class然后再找标签要比先找标签再找class高