javascript - jQuery 选择器的速度似乎是错误的我的代码

Question

我正在优化一些代码，我需要禁用下拉选择菜单中的第一个选项。我比较了三种方法来找到最快的方法，都可以在这里找到 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 个选择菜单，每个菜单有 10 个选项，并为随机选择菜单提供了 disable me 类(我想要一些变化看看它是否改变了结果)。然后计时器开始计时，jquery 选择器进入并找到 .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

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

区别有几个:

1. 浏览器没有 querySelector/querySelectorAll - 然后表达式被解析并分解为有效的位，例如 document.getElementById、document.getElementsByClassName(如果可用)、document.getElementsByTagName - 然后应用适当的过滤器，例如只选择第 n 种结果等。这通常涉及多个正则表达式和函数调用。

2. 浏览器确实有 querySelectorAll - 所有常青 vendor 都对其进行了大量优化。鉴于表达式没有任何伪表达式，如 :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 毫秒。

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

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