JS遍历select选项循环IE比Chrome快的原因及Chrome端优化方案

你遇到的性能差异确实和Chrome、IE的DOM访问机制有关：

• 代码中用到的currentFilterList.options是实时HTMLCollection，每次访问这个集合的属性（length、下标元素）都需要重新查询DOM树结构。IE针对旧版网页的这类高频DOM访问做了专属兼容缓存，而Chrome的V8引擎更偏向对纯JS运算优化，对高频重复DOM访问的开销控制反而不如旧IE。
• 原循环中重复读取DOM属性、字符串逐次拼接的操作，在5万次量级下会被放大，Chrome下的累计开销远高于IE。

最高优先级优化：直接读取选中项，无需遍历所有option #

HTMLSelectElement原生提供selectedOptions属性，直接返回所有已选中的option集合，完全不需要遍历全部5万条option，不管总option数多少，只需要遍历选中的条目即可，性能可以提升几个数量级：

function SaveCurrentFilterDisplay() {
    const currentFilterCode = document.getElementById('curfilt').value;
    if (!currentFilterCode) return true;

    const currentFilterList = document.getElementById(currentFilterCode);
    const currentFilterDisplay = document.getElementById(currentFilterCode + '_display');
    let str = '';

    if (currentFilterList.tagName === 'SELECT' && currentFilterList.multiple) {
        // 直接拿所有选中的option，不需要遍历全部
        const selectedOpts = currentFilterList.selectedOptions;
        const strArr = [];
        for (let i = 0; i < selectedOpts.length; i++) {
            strArr.push(selectedOpts[i].text);
        }
        str = strArr.join(', ');
    } else {
        str = currentFilterList.value;
    }

    alert('finished looping');
    currentFilterDisplay.value = str;
    return true;
}

兼容场景优化（适配不支持selectedOptions的旧浏览器） #

如果需要兼容不支持selectedOptions的老版本浏览器，可以用缓存DOM属性、数组拼接的方式优化原逻辑：

function SaveCurrentFilterDisplay() {
    var currentFilterCode = document.getElementById('curfilt').value;
    var currentFilterList, currentFilterDisplay;
    var i, str, strArr = [], options, len;

    if (currentFilterCode != '') {
        currentFilterList = document.getElementById(currentFilterCode);
        currentFilterDisplay = document.getElementById(currentFilterCode + '_display');

        if (currentFilterList.length) {
            // 把options和length提前缓存到本地变量，避免每次循环访问DOM
            options = currentFilterList.options;
            len = currentFilterList.length;
            for (i = 0; i < len; i++) {
                if (options[i].selected) {
                    strArr.push(options[i].text);
                }
            }
            str = strArr.join(', ');
        } else {
            str = currentFilterList.value;
        }

        alert('finished looping');
        currentFilterDisplay.value = str;
    }

    return true;
}

内容的提问来源于stack exchange，提问作者Mr. Spock