javascript - Mootools选择器$或$$。哪个表现更好

Question

我很好奇哪个选择器会更快地使浏览器查找。我对通用而非特定浏览器感兴趣。

$('accountDetailsTable').getElements('.toggler')

这将像在使用accountDetailsTable一样查找document.getElementById('accountDetailsTable');，然后在元素内部查找.toggler。

$$('.toggler')

而这将直接返回所有选择器。但最终它们都会给我相同的结果。

那么哪一个会更快？我该如何测试？

Answer 1

在过去的两年中，我对MooTools的内部了解变得有些生疏，但总的来说，我希望$$ -selector更快，因为它只需要遍历元素一次。

为什么不试试呢？参见this JSfiddle：

粗糙的HTML：

<div id="accountDetailsTable">
    <div id=".toggler">1</div>    
    <div id=".toggler">2</div>    
    <div id=".toggler">3</div>    
</div>

JScript（请不要对错误的代码进行评论，仅是为了演示其功能）：

window.addEvent('domready', function() { 
    var iter = 50000;

    var tstart = new Date().getTime();
    for (var i=0;i<iter;i++) {
        var x = $('accountDetailsTable').getElements('.toggler');
    }

    var tend = new Date().getTime();   
    var tdur = tend - tstart;

    console.log('$: ' + tdur + ' ms');

    var tstart = new Date().getTime();
    for (var i=0;i<iter;i++) {
         var x = $$('.toggler');
    }

    var tend = new Date().getTime();   
    var tdur = tend - tstart;

    console.log('$$: ' + tdur + ' ms');
});

也就是说，我的测试大约进行了50000次迭代，结果大致如下：


$('accountDetailsTable').getElements('.toggler')：〜4秒
$$('.toggler')：〜2秒


结果会因浏览器，元素等的不同而有所差异，因此这仅是一个近似值。

这就是说，如果您在这么短的时间内拥有这么多的选择器，您可能只会感到有所不同。是的，应该考虑性能，如果您的应用程序中只有几个选择器，那就没关系了。

我之所以选择$$()，并不是因为它具有更好的性能，而是因为它具有更好的可读性。