选择器的性能

Question

我已经使用jQuery选择器完成了a test。

我测试的两个选择器：

selection_width = total_width - ($('#commands .minimap').outerWidth() + $('#commands .actions').outerWidth());

和

var commands = $('#commands');
selection_width = total_width - ($('.minimap', commands).outerWidth() + $('.actions', commands).outerWidth());

第二个比第一个快。这是正确的还是我把测试搞砸了？

Answer 1

在第一个测试中，jQuery使用document.querySelectorAll()（相对较快）两次。在第二种情况下，jQuery使用document.getElementById()（非常快）一次和document.getElementsByClassName()（自从您声明上下文后快速）两次。

Answer 2

在第二个中存储命令元素，以便不再搜索它。这样你就会获得更好的表现。

Answer 3

第一个语句必须分析完整的DOM树并查找元素#commands两次，而第二个语句只需要检查整个DOM树。搜索元素.minimap和.actions的速度更快，因为jQuery只需迭代#commands的子元素，而不是整个文档。