为什么这个 Javascript 比它的 jQuery 等价物“慢”得多？

Question

我有一个大约 500 个项目的 HTML 列表，上面有一个“过滤器”框。我开始在输入字母时使用 jQuery 来过滤列表（稍后添加计时代码）：

$('#filter').keyup( function() {
    var jqStart = (new Date).getTime();

    var search = $(this).val().toLowerCase();
    var $list = $('ul.ablist > li');

    $list.each( function() {
        if ( $(this).text().toLowerCase().indexOf(search) === -1 )
            $(this).hide();
        else
            $(this).show();
    } );

    console.log('Time: ' + ((new Date).getTime() - jqStart));
} );

但是，输入每个字母（特别是第一个字母）后有几秒钟的延迟。所以我想如果我使用普通的 Javascript 可能会稍微快一些（我最近读到 jQuery 的 each 函数特别慢）。这是我的 JS 等效项：

document.getElementById('filter').addEventListener( 'keyup', function () {
    var jsStart = (new Date).getTime();

    var search = this.value.toLowerCase();
    var list = document.querySelectorAll('ul.ablist > li');
    for ( var i = 0; i < list.length; i++ )
    {
        if ( list[i].innerText.toLowerCase().indexOf(search) === -1 )
            list[i].style.display = 'none';
        else
            list[i].style.display = 'block';
    }

    console.log('Time: ' + ((new Date).getTime() - jsStart));
}, false );

然而，令我惊讶的是，普通 Javascript 比 jQuery 等效项慢 10 倍。 jQuery 版本大约需要 2-3 秒来过滤每个字母，而 Javascript 版本需要 17 秒以上！我在 Ubuntu Linux 上使用 Google Chrome。

这并不是真正重要的事情，因此不需要非常高效。但我在这里用 Javascript 做了一些非常愚蠢的事情吗？

Answer 1

您可以尝试使用 textContent 而不是 innerText ，我认为它应该更快。另外，分别对列表生成和循环进行计时可以判断列表生成是否存在问题。

Answer 2

提高 JavaScript 速度的另一个最佳实践是将 list.length 缓存在变量中并调用该变量，如下所示：

l = list.length;
for (var i=0;i<l;i++):{ code here}

也许可以使用

Answer 3

在这里，我对您的代码进行了一些重构：

var filter = document.getElementById( 'filter' ),
    ablist = document.querySelector( '.ablist' );

filter.addEventListener( 'keyup', function () {
    var re, elems, i, len, elem;

    re = RegExp( this.value, 'i' );
    elems = ablist.children;

    for ( i = 0, len = elems.length; i < len; i += 1 ) {
        elem = elems[i];       
        elem.style.display = 
                elem.textContent.search( re ) > -1 ? 'list-item' : 'none';
    }
}, false );

现场演示： http://jsfiddle.net /MVFxn/

更改：

• ，则不需要 toLowerCase
• 使用正则表达式和 i 标志，如果只有一个 '.ablist' 元素在页面上，querySelector 应该是获取它的最快方法（因为一旦找到第一个这样的元素，它就会中止查询），
• 自 children 以来，没有对 LI 元素的查询code> 属性已经方便地引用它们。

我很想知道这段代码在您的页面上的执行情况...

Answer 4

我使用 while 而不是 for 并做了一些小的改进。 这里是最终代码。

var list = list = document.querySelectorAll('ul.ablist > li');
document.getElementById('javascriptFilter').addEventListener( 'keyup', function () {
    var jsStart = (new Date).getTime(),
        search = this.value.toLowerCase(),
        i = list.length - 1,
        listItem,
        result;
    while( i >= 0 )
    {
        listItem = list[i];
        if ( listItem.textContent.toLowerCase().indexOf(search) === -1 )
            listItem.style.display = 'none';
        else
            listItem.style.display = 'block';
        i--;
    }

    result = ((new Date).getTime() - jsStart);
    console.log(['Time: ', result, '<br />'].join(''));
}, false );