IE 中的 jQuery 选择器太慢了

Question

如果您在 IE7/IE8 中运行此页面http://jsfiddle.net/atoswchataigner/euX5F，您将获得：

停止运行此脚本？此页面上的脚本导致 Internet Explorer 运行缓慢。如果它继续运行，您的计算机可能会变得无响应。

我基本上运行所有这些脚本来对选择中的选项进行分组。

您有没有更好的方法来进行这种转换并在 IE 中消除此警报？

Answer 1

您正在运行大量的选择器操作，每一个都不是很有效，尤其是在旧浏览器中。

最好执行一次选择器操作并处理该操作中的所有选项值。您可以通过为选项值构建一个查找表来为您提供适当的类名称来做到这一点。这是一个例子。我没有填写整个表格，因为它需要输入很多内容（您可以输入其余部分），但这是它的工作方式。

这应该比你的速度快很多倍（可能快 100 倍以上）：

    // class names used for various options
    var optionClasses = [
        "ART - LETTRES - SPECTACLE",
        "ECONOMIE",
        "ETRANGER"
    ];
    // the number in the option map corresponds to an array index 
    // in the optionClasses array.  This is done to avoid repeating
    // the same string over and over
    var optionMap = {
        'ART - LETTRES - SPECTACLE': 0,
        'A la une ALS': 0,
        'Cirque' : 0,
        'Festival multidisciplinaire': 0,
        'Littérature-édition': 0,
        'Musique classique': 0,
        'Photographie': 0,
        'Cinéma': 0,
        /* .... */
        'ECONOMIE': 1,
        'A la une Economie': 1,
        /* ... */
        'ETRANGER': 2,
        'A la une Etranger': 2
        /* fill in the rest of the data here */
    };

    jQuery("select option").each(function() {
        if (this.value && this.value in optionMap) {
            var clsNum = optionMap[this.value];
            $(this).addClass(optionClasses[clsNum]);
        }
    });

它很简单，执行速度应该比以前快很多倍。它有一个选择器操作，然后使用哈希表查找来为给定的选项值找到合适的类名。

Answer 2

这种选择器在 Firefox 中似乎也很慢。

我猜“[option value='...']”部分会导致 jQuery 扫描整个文档中的所有元素以寻找匹配的元素。它为每个选择器中的每个 term（','s 之间的部分）执行此操作。工作量很大。

我有一个小提琴，发现在 Firefox 中，如果我使用这样的方法，它的响应速度会更快：

var options = $("option");
var $XXX = options.filter("[value=VALUE1], [value=VALUE2], [value=VALUE3]");
// etc

这样做是首先创建一个仅包含选择选项的 jquery 对象/集合，然后使用选择器过滤掉所需的选项。

尝试修改您的代码以使用此方法。

Answer 3

据我了解，您的代码所做的是根据第一个选择加载第二个选择的选项。

在 DOM 上放置如此大量的元素是很费力的。与其加载异常长的 DOM 元素行，不如将数据存储为数组和对象，并在必要时加载。这样一来，选择将是空白的。

//storing second options as objects and arrays
var second = {
    art : [
        {text:'artOption1Text',value:'artOption1Value'},
        {text:'artOption2Text',value:'artOption2Value'},
        {text:'artOption3Text',value:'artOption3Value'}
        ...
    ],
    social : [
        {text:'socialOption1Text',value:'socialOption1Value'},
        {text:'socialOption2Text',value:'socialOption2Value'},
        {text:'socialOption3Text',value:'socialOption3Value'}
        ...
    ]
    ...
}

var secondSelect = $('secondselect');          //reference your second select

$('firstselect').on('change',function(){       //on change of first select
    var newOptions = second[this.value];       //get the new values

    secondSelect.children().remove();          //remove current options

    $.each(newOptions,function(index,option){ //add the new options

        $('<option>')
            .attr('value',option.value)
            .text(option.text)
            .appendTo(secondSelect);
    });
}