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

Question

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

Answer 1

我也来用学生梗！

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

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

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

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

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

Answer 2

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

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

哪位老师点的快呢？

Answer 3

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

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

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