为什么我能够比data-attribute更快地按类选择元素？

Question

我做了一个小jsperf来测试用jQuery选择一个元素：http://jsperf.com/testing-class-selector-vs-data-selector2

我发现结果令人震惊。它说它使用速度慢了80％：

var foo = $('[data-ui=foo]');

与

var foo = $('.ui-foo');

这些是否应该同样高效？两者都在＆＃39; class＆＃39;中寻找DOM特定区域内的字符串的完全匹配。或者＆＃39; data-ui＆＃39;？

Answer 1

这个

var foo = $('[data-ui=foo]');

扫描整个DOM树，但是这个

var foo = $('.ui-foo');

只返回该类元素的列表。通常浏览器维护每个类下的元素集合。出于优化目的。每个DOM解析时间（以及类属性更新）将填充此集合一次。