为什么这个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,我认为它应该更快.同时对列表生成和循环进行单独计时也可以判断列表生成是否存在问题.