javascript - 为什么这个 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 上使用谷歌浏览器。

这不是为了任何真正重要的事情，所以它不需要非常高效。但是我在这里用我的 Javascript 做了一些非常愚蠢的事情吗？

Answer 1

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