jQuery 选择器的速度似乎有误我的代码

Question

我正在优化一些代码，我需要禁用下拉菜单 select 中的第一个选项。我比较了三种方法来找到最快的一种，都可以在这里找到 jquery-fastest-method-find-descendents

他们是：

1. Scope:  $(".child", $("#parent"));
2. Find: $("#parent").find(".child"); 
3. 'Normal': $("#parent .child"); 
(I call it 'Normal' because that's the one I normally use for everything)

根据链接的文章以及我看到的其他 SO 帖子，1 和 2 应该是相同的，那么 3 应该是最慢的。但是，我操纵了一些时间 fiddle，它似乎显示出完全相反的情况。

Fiddle Here

对于三个测试中的每一个，fiddle 创建 1000 个 select 菜单，每个菜单给它们 10 个选项，并给随机 select 菜单禁用我 class（我想要一些变化，看看它是否改变了结果）。然后计时器开始计时，jquery selector 进入并找到 .disableMe 并禁用第一个选项。

那么谁能告诉我为什么我看到的结果与我的预期相反？我是不是在测试的时间部分搞砸了某些东西，或者可能混淆了一些高级逻辑？

不想要的人的代码fiddle:

function createMenus()
{
    $('body').empty();
    for (var i = 0; i < 1000; i++)
    {
         var select = $(document.createElement('select')).appendTo($('body'));
         if( Math.round(Math.random() * 1))
               select.addClass("disableMe");
         for (var j = 0; j < 10; j++)
         {   
             $(document.createElement('option')).appendTo(select).html('optionText');
         }
    }
}

//.find()
createMenus();
var start= Date.now();
$('.disableMe').find('option:nth-child(1)').attr('disabled', 'disabled');
var diff = Date.now() - start;
console.log("Find: "+ diff )

//Normal selector
createMenus();
start= Date.now();
$('.disableMe option:nth-child(1)').attr('disabled', 'disabled');
diff = Date.now() - start;
console.log("'Normal': "+ diff )

//Scope selector
createMenus();
start= Date.now();
$('option:nth-child(1)', '.disableMe').attr('disabled', 'disabled');
diff = Date.now() - start;
console.log("Scope: "+ diff )

我看到的平均结果：

 Find: 20
 'Normal': 4
 Scope: 16

Answer 1

本文假设jQuery必须使用Sizzle库来解析和执行选择器。在现代浏览器中不再如此。

大多数选择器（使用 jQuery 扩展的选择器除外）可以使用 querySelectorAll 方法执行。由于这是内置于浏览器中的，因此它比前两个替代方案更快。

所有常见浏览器的当前版本都支持 querySelectorAll 方法，最早可追溯到 IE 9。

除非您有任何实际的性能问题，否则您应该采用最简单的解决方案。本文中的建议是一个很好的例子，说明当浏览器实现发生变化时，对代码进行微优化会适得其反。

Answer 2

这是非常主观的。选择器速度优化在很大程度上取决于浏览器。您引用的 post 来自 IE7/8 仍然相关的时代。甚至 IE6 也可能与某些人相关。

区别有几个：

浏览器没有 querySelector / querySelectorAll - 然后表达式被解析并分解为有效的位，例如 document.getElementById, document.getElementsByClassName（如果可用），document.getElementsByTagName- 然后应用适当的过滤器，例如只选择第 n 种类型的结果等。这通常会涉及多个正则表达式和函数调用。
浏览器确实有 querySelectorAll - 所有常青供应商都对其进行了大量优化。鉴于表达式没有任何伪表达式，如 :is 或 :not 或 :has，它将直接通过。

您可以在 fiddle - http://fiddle.jshell.net/shewhqc4/show/light/

上进行测试

打开控制台并使用：

console.time('select');
console.log($$('.disableMe option:nth-child(1)'));
console.timeEnd('select');

console.time('selectJQ');
console.log($('.disableMe option:nth-child(1)'));
console.timeEnd('selectJQ');

第一个是 QSA，第二个是 jQuery - 在我的 FF 上慢了大约 8-9 毫秒。

其他方法在常青浏览器上速度较慢的原因是因为它们不是最常见的用例代码路径（首先），其次，它们需要 chain 结果并传递上下文以便进行更多函数调用。

最终，选择器速度是一种毫无意义的衡量标准，因为很少需要连续搜索整个 dom w/o 缓存结果，除非您正在编写游戏，否则获得的收益将毫无意义。

Answer 3

您可以打开 Chrome 的 Developer Tools，然后在 Profiles 菜单中收集一个新的 JavaScript CPU Profile。收集完数据后，点击Heavy (Bottom Up)，将其改为Chart，那么你就很容易知道是什么消耗了更多的时间。

jQuery 选择器的速度似乎有误我的代码

Speed of jQuery selector seems to be wrong my code

javascript

optimization

jquery

jquery-selectors