Question

当我们点击“全部”时，我们正面临性能问题。当我们在下拉列表中有许多值（大约100个值）时，在分组的多选下拉组件中链接。

这个问题仅在IE8中发生，并且在其他浏览器中正常运行。在我们初步分析后，我们观察到了

multiselect.js文件的函数changeItemState中的以下行导致IE8中出现此问题。能否为您提供任何解决方案

monitor.set('html', '
 + this.changeMonitorValue(item.getParent()) + 
);
monitor.title = this.getHoverTitle(item.getParent());

Answer 1

不确定何时删除了实际代码，但是当你说你有100个值时 - 尤其是使用getter - 这可能是IE8或更低版本中的一个问题。

javascript中的字符串是不可变的。这意味着如果你需要连接100个字符串，它将创建一个新字符串，将下一个字符串添加到它并清理100次。这在IE中并不是非常高效，因此很多人过去常常使用Array.join('')：

var foo = 'a' + 'b' + 'c' + 'd', // faster in modern and mobile browsers
    bar = ['a','b','c','d'].join(''); // faster by ~50% IE7, IE8

然而，在移动设备，andorid和现代浏览器中，阵列连接技巧较慢。

另一个优化可能是您添加了在表单操作（您的模型）期间将当前值导出到数组中的更改处理程序，从而无需在提交事件中一次性获取100个。

由于节点的父节点是不可变的（可能），因此无需一直转到item.getParent()，您可以在事先做到一次，甚至可以参考item.parentNode直接避免函数调用。

发布changeMonitorValue来源可以在那里进行优化，因为它可能是次优的。我希望您使用http://mootools.net/forge/p/mutiselect？

如果是这样，https://github.com/mlazz/MultiSelect/blob/master/Source/MultiSelect.js可以优化很多。但是，这是插件作者的事情。

有创意：）