jQuery在IE中非常慢 [英] jQuery very slow in IE

问题描述

我写了一个代码来过滤元素列表.

I wrote a code to filter a list of elements.

<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

我用大约500个

来测试了此javascript代码. "ms-selectable"类中的元素. 在我的IE8中，此代码在10000毫秒内运行，而在FF中，此代码在1000毫秒内运行！ 如何在IE中执行此任务?

I tested this javascript code with about 500 <li> elements in class 'ms-selectable'. In my IE8 this code run in 10000ms, while in FF this run in 1000ms! How to perform this task in IE?

谢谢！

推荐答案

循环，尤其是与DOM交互的循环，通常可能会在较旧的浏览器中导致性能下降.您可以通过确保您的选择器得到更优化的服务，如非时空旅行"所建议的那样.不用一遍又一遍地重复$(this)，而是将元素缓存在变量中:

Loops, particularly those in which you're interacting with the DOM, are generally likely to cause a performance hit in older browsers. You can help matters by ensuring your selectors are more optimised as Non-Stop Time Travel suggests. Instead of repeating $(this) over and over, cache the element in a variable:

var $this = $(this);

此外，与jQuery的$.each()方法相比，使用常规的"for"循环通常可以大大提高性能:

Also, you can generally gain quite a big boost in performance by using a regular "for" loop as opposed to jQuery's $.each() method:

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

Lots of tests to support this on jsPerf: http://jsperf.com/jquery-each-vs-for-loop/186

重要的是要记住，任何DOM交互(包括查找)都是缓慢的.当页面中包含很多标记时，尤其如此.您可以通过使用ID，缓存选择器，最小化DOM交互以及使用常规的for循环来加快处理速度.这是Nicholas Zakas的精彩摘要: http://jonraasch.com/blog/10-javascript -nicholas-zakas提供的性能提升提示

It's important to remember that any DOM interaction, including lookups, is slow. This is especially true when your page has a lot of markup in it. You can speed things up by using IDs, caching your selectors, minimising DOM interaction and using regular for loops. Here's a great roundup from Nicholas Zakas: http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas

这篇关于jQuery在IE中非常慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！