jQuery 选择器在 IE 中太慢

Question

如果您运行此页面http://jsfiddle.net/atoswchataigner/euX5F在 IE7/IE8 中你会得到:

停止运行该脚本？此页面上的脚本导致 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]);
        }
    });

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