1

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

5个回答

3

已采纳

权当本题考查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>

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

1

在本页内的测试,确实div+.ab效率高

console.time(".post-offset+div");for(var i=0;i<10000;i++){document.querySelectorAll(".post-offset+div");};console.timeEnd(".post-offset+div");
console.time("div+.post-offset");for(var i=0;i<10000;i++){document.querySelectorAll("div+.post-offset");};console.timeEnd("div+.post-offset");
.post-offset+div: 284.1220703125ms
div+.post-offset: 177.22900390625ms

Xeira · 8月11日

展开评论
0

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

0

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

0

选择器越精确效率越高

-1

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

3

ID > Tag > Class

ID 选择器是速度最快的,这主要是因为它使用 JavaScript 的内置函数 getElementById();
其次是类型选择器,因为它使用 JavaScript 的内置函数 getElementsByTag();
速度最慢的是 Class 选择器,其需要通过解析 HTML 文档树,并且需要在浏览器内核外递归,这种递归遍历是无法被优化的。

月影 · 8月11日

展开评论

撰写答案