【问题标题】：jQuery very slow in IEjQuery 在 IE 中非常慢
【发布时间】：2011-07-04 10:10:26
【问题描述】：

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

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

我在“ms-selectable”类中使用大约 500 个

元素测试了这段 javascript 代码。在我的 IE8 中，这段代码在 10000 毫秒内运行，而在 FF 中，这段代码在 1000 毫秒内运行！如何在 IE 中执行此任务？

谢谢！

【问题讨论】：

你真的需要构造多少次$(this)？ jQuery 并不是让 DOM 遍历超快的灵丹妙药；你的选择器一直从根目录搜索，这太慢了。

标签： jquery internet-explorer

【解决方案1】：

循环，尤其是与 DOM 交互的循环，通常可能会在旧版浏览器中造成性能下降。正如 Non-Stop Time Travel 所建议的那样，您可以通过确保您的选择器更加优化来帮助解决问题。不要一遍又一遍地重复$(this)，而是将元素缓存在一个变量中：

var $this = $(this);

此外，与 jQuery 的 $.each() 方法相比，使用常规的“for”循环通常可以获得相当大的性能提升：

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 交互（包括查找）都很慢。当您的页面中有很多标记时尤其如此。您可以通过使用 ID、缓存选择器、最小化 DOM 交互和使用常规 for 循环来加快速度。这是 Nicholas Zakas 的精彩综述： http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas

【讨论】：