JQuery очень медленно в IE

Question

Я написал код для фильтрации списка элементов.

HTML:

<div id="ms-simpleCountries" class="ms-container">
<div class="ms-selectable"><ul><li style="display: none;" ms-value="fr">France</li><li style="display: none;" ms-value="ca">Canada</li><li ms-value="ar">Argentina</li><li ms-value="pt">Portugal</li></ul></div>
<div class="ms-selection"><ul><li ms-value="fr">France</li><li ms-value="ca">Canada</li></ul></div>
</div>

Javascript:

function filterAvailable()
{
var filterText = "ca"; // <-- string used to filter


var a_val;
var a_txt;
$('.ms-container .ms-selectable li').each (function () { 

    // valore elemento disponibile corrente
    a_val = $(this).attr('ms-value');   // ca
    a_txt = $(this).text();             // canada

    // --
    if ($('.ms-container .ms-selection [ms-value="' +a_val +'"]').length > 0)
    {
        $(this).hide();
    }
    else 
    {
        if ($(this).text().toUpperCase().indexOf(filterText) >= 0)
        {
            $(this).show();
        }
        else
        {
            $(this).hide();
        }
    }

});//each

}//end

Я тестировал этот код JavaScript примерно с 500

элементов в классе ms-selectable.В моем IE8 этот код выполняется за 10000 мс, а в FF - за 1000 мс!Как выполнить эту задачу в IE?

Спасибо!

Answer 1

Циклы, особенно те, в которых вы взаимодействуете с DOM, обычно могут привести к снижению производительности в старых браузерах. Вы можете помочь в решении вопросов, гарантируя, что ваши селекторы будут более оптимизированы, как предполагает Non-Stop Time Travel. Вместо того, чтобы повторять $(this) снова и снова, кэшируйте элемент в переменной:

var $this = $(this);

Кроме того, как правило, вы можете значительно повысить производительность, используя обычный цикл for, в отличие от метода $.each() jQuery:

function filterAvailable () {
    var filterText = 'ca';
    var items = $('.ms-container .ms-selectable li');
    var $currentItem;
    var a_val;
    var a_txt;

    for (var i = 0, j = items.length; i < j; i++) {
        $currentItem = $(items[i]); // in place of $(this)

        // Contents of $.each() loop here
    }
}

Множество тестов для поддержки этого на jsPerf: http://jsperf.com/jquery-each-vs-for-loop/186

Важно помнить, что любое взаимодействие с DOM, включая поиск, происходит медленно. Это особенно верно, когда на вашей странице много разметки. Вы можете ускорить процесс, используя идентификаторы, кэшируя селекторы, минимизируя взаимодействие с DOM и используя регулярные циклы for. Вот отличная сводка от Николая Закаса: http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas