选择器的性能答案

【问题标题】：Performance of selector选择器的性能
【发布时间】：2012-01-31 12:11:26
【问题描述】：

我已经完成了a test 的 jQuery 选择器性能。

我测试过的两个选择器：

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

还有：

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

第二个比第一个快得多。这是正确的还是我在某个地方搞砸了测试？

【问题讨论】：

标签： jquery performance

【解决方案1】：

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

【讨论】：

【解决方案2】：

在第二个中，您存储 commands 元素，因此不会再次对其进行搜索。从而获得更好的性能。

【讨论】：

但它仍然需要搜索minimap 和actions 元素，对吗？是什么让第二个比第二个更快？我不明白：P
@PeeHaa，当然，Jquery 将如何找到它？
@PeeHaa，命令元素不再重新搜索+“动作”+“小地图”。只有“动作”和“小地图”。

【解决方案3】：

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

【讨论】：