jQuery 性能问题

Question

我在使用此代码但超过 1000 时遇到性能问题 <tr>行数

我的想法是我有标签 <tr>里面有 td 和文本，我试图隐藏和显示文本是否包含。代码有效，但超过 1000 <tr>有了信息，我有很多延迟。有什么方法可以让它更快？此代码在文本更改时调用，因此称为小于按键(我想要的原始方式)

var grilla = $(control).parent().parent().next().next();
  var texto = $.trim($(control).val());


    if(texto.length < 2){
        grilla.children().children().children().children('tr').show(200);
        return false;
    }

    var renglones = grilla.children().children().children().children("tr");
    if($(renglones).children('td:first').children().is('[type=text]')){
        console.info('busca en inputs');
            buscarGrillaInputs(renglones,texto);
            return false;
    }

    $.each( renglones, function() {
        if (!$(this).children('td').is(':contains('+texto.toLowerCase()+')') && !$(this).children('td').is(':contains('+texto.toUpperCase()+')')){
            $(this).hide(200);
        }
        else{
            $(this).show(200);
        }

    });

Answer 1

我曾尝试使用 contains 选择器，发现性能很慢。我对 $.filter 有更好的运气

.show(200) 也会伤害你。如果有如此大量的条目要运行，只需运行 .show() 与 .hide() 相同

http://jsfiddle.net/SeanWessell/e7yvrta1/

$('#search').on('input propertychange paste', function () {
    var phrase = this.value;
    $('tr').hide();
    $('table input').filter(function () {
        return this.value.toLowerCase().indexOf(phrase) != -1;
    }).closest('tr').show();

});