Как оптимизировать фильтр на Jquery?

Question

[Евгений]

Есть таблица, примерно на 2500 строчек, был написан "типа фильтр". Проблема в том, что он, ну очень долго работает, перед каждым вводом символа браузер повисает на пол секунды примерно. Вот сам код фильтра.

$(function(){
    $('#search').on('input', function(){
        var search = $('#search').val().toLowerCase();
        $('.search').each(function(){
            var str = $(this).find('td').data('search') || "";
            str = str.toString().toLowerCase();
            console.log(str.search(search));
            if(~str.search(search)){
                $(this).show();
            }else{
                $(this).hide();
            }
        });
    });
});

Подскажите как можно оптимизировать сие действие?

Answer 1

[Negwereth]

1. Убрать console.log
2. Закешировать ссылки на DOM-элементы ещё до первого поиска.

Comments

[Евгений]

Console.log не увидел, при его отсутствии ничего не менялось. За кеш, спасибо, сейчас попробую.

Answer 2

[imhuman]

Попробуй indexOf вместо search, он быстрее, если тебе регулярки не нужны

Comments

[Евгений]

Да, спасибо, я заметил что indexOf побыстрее работает, ну и кеш собсна тоже помог, но такого быстродействия как на ангуляре, походу не добьешься, но все равно работает достаточно быстро)

Answer 3

[Kovalsky]

1. По-хорошему стоило бы разделить расчёт и рендеринг, то есть одна функция решает какие элементы соответствуют фильтру, а другая занимается стилями. К тому же мне кажется что в данном случае есть смысл использовать классы, так было бы быстрее,
   
2. В большинстве случаев если действия пользователя требуют каких-то значительных вычислений, особенно если речь о input, то эффективно бывает их отложить - не сразу выполнять всё, а давать пользователю время ввести запрос и только потом всё считать. Например, как здесь в поиске сверху. Еще меньше лишней нагрузки было бы при наличии некой кнопки, которая стартовала бы расчёты по нажатию на неё,
   
3. Наконец, зависания можно вообще исключить, выполняя расчёты в отдельном потоке с помощью Web Worker.
   

Покажите новую версию кода.

Comments

[Евгений]

Держи.

$(function(){
    var mas = [];
    var str = '';
    $('.search').each(function() {
        mas.push($(this));
    });
    $('#search').on('input', function(){
        var search = $('#search').val().toLowerCase();
        mas.forEach(function(item){
            str = item.find('td').data('search') || "";
            str = str.toString().toLowerCase();
            if(~str.indexOf(search)){
                item.show();
            }else{
                item.hide();
            }
        });
    });
});