Javascript jQuery选择器的速度似乎是错误的我的代码_Javascript_Jquery_Optimization_Jquery Selectors

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

javascript jquery optimization

Javascript jQuery选择器的速度似乎是错误的我的代码,javascript,jquery,optimization,jquery-selectors,Javascript,Jquery,Optimization,Jquery Selectors,我正在优化一些代码，我需要禁用下拉选择菜单中的第一个选项。我比较了三种方法来找到最快的一种，都可以在这里找到它们是： 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) 根据链

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

它们是：

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创建1000个选择菜单，每个给它们10个选项，并给随机选择菜单一个disable me类（我想看看它是否改变了结果）。然后计时器开始，jquery选择器进入并查找.disableMe并禁用第一个选项

那么，有谁能告诉我，为什么我看到了与我预期相反的结果？我是不是在测试的计时部分搞砸了什么，或者是一些高级逻辑被搞糊涂了

不想要小提琴的人的代码：

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 )

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

大多数选择器（使用jQuery扩展的选择器除外）都可以使用

querySelectorAll

方法执行。由于它内置在浏览器中，因此比前两种选择更快

querySelectorAll

方法在所有常用浏览器的当前版本中都受支持，最早可追溯到IE 9

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

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

大多数选择器（使用jQuery扩展的选择器除外）都可以使用

querySelectorAll

方法执行。由于它内置在浏览器中，因此比前两种选择更快

querySelectorAll

方法在所有常用浏览器的当前版本中都受支持，最早可追溯到IE 9

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

这是非常主观的。选择器速度优化严重依赖于浏览器。你引用的帖子来自IE7/8仍然相关的时代。甚至IE6也可能与某些人有关

区别有几点：

浏览器没有

querySelector

queryselectoral

-然后解析表达式并将其分解为有效位，例如

document.getElementById

，

document.getElementsByClassName

（如果可用），

document.getElementsByTagName

-然后应用适当的筛选器，例如，仅选取第n个类型的结果等。这通常会涉及多个正则表达式和函数调用

浏览器确实有

querySelectorAll

——所有evergreen供应商都对其进行了大量优化。假设表达式没有任何伪表达式，如

：is

或

：not

或

：has

，则它将是直接传递

你可以在小提琴上测试这个-

打开控制台并使用：

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毫秒

其他方法在evergreen浏览器上速度较慢的原因是，它们不是最常见的用例代码路径（第一个），第二个，它们需要

链接

结果并传递上下文，以便进行更多的函数调用

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