首页 > js/jquery选择器的遍历,为什么用.class或者tagname的速度要快于[name='my-name']

js/jquery选择器的遍历,为什么用.class或者tagname的速度要快于[name='my-name']

比如,<a class='my-class' name='my-name' src='.com'>sth</a>,如果用.my-class或者a要快于[name='my-name'],虽然前两者能用到浏览器的原生函数,但是原生函数不也是要对dom tree做深度优先遍历么,为什么后者要慢?


不知道可不可以这样解释。

A老师上课点名,直接按照学生表喊出名字,点到的同学直接站起来答到。
B老师上课点名,根据学生表里的名字或座位号之类的一个个对照看看来没来。

哪位老师点的快呢?


tag和class都使用了原生Javascript选择器,其中的tag兼容性更强,IE9以下的getElementByClassName不被支持,得通过其它方式实现。

DOM树的深度什么我不懂,只知道浏览器没有原生支持属性选择,现代浏览器中可以通过querySelectorAll()(jQuery的选择器sizzle里是这么写的)拿到属性选择的结果,但速度没有上面两个块,古老的浏览器要遍历所有DOM逐一判断,更慢。

了解更深只能去看浏览器的实现了,单从Js上猜已经没意思了


我也来用学生梗!

id是学生的学生证;tagname是学生的班级;class是学生的社团;name是学生校服上的铭牌编号。

班级是必备属性,学生入校时必须隶属于一个班级(对应标签的tagname)
学生证号是学生的唯一识别名,不允许重复,但允许非本校学生登记后跟班旁听(对应标签的id)
社团是学生可选的项目,相同兴趣爱好的学生可以加入同个社团。可以加入多个社团也可以一个不加(对应标签的class)
班级、学生证、社团都会在学校档案中列入花名册。(对应dom树构建完成后,tagname、id、class会单独列入索引,可以被ByTagName\ByClassName\ById方法读取)

学校的校规比较松,校服不是必须穿的(对应标签的name,本质上和其它属性一个地位)。

现在开始点名:
报学生证号:直接花名册查,学生证号是XXX的,人叫OO,XX班的!方便快捷!
报班级号:直接查班级名册,这个班有这些人上课,方便快捷!
报社团名:直接查社团名册,这个社团登记了XXX人,方便快捷!

报校服铭牌号:所有学生都来操场排队站好!一个一个来!你没穿校服,下一个!你也没穿校服,下一个……哦,你穿了,但号码不对,下一个……好的,你穿校服了,号码也对,出列!下一个……
天都要黑了好吗!!!

【热门文章】
【热门文章】