jQuery插件Chosen(增强mutliselects)在Chrome中运行良好,但在Internet Explorer中运行缓慢

我目前正在使用Chosen jQuery插件 。 看看我的小提琴: http : //jsfiddle.net/3XWSe/

尝试Chrome和Internet Explorer中的小提琴(我使用IE 11测试)。

请注意,在Chrome浏览器中单击多选时有一个延迟(4或5秒),而在Chrome中则非常少,几乎没有。 此示例下拉列表列出了德克萨斯州的所有城市,并且有近5000个选项。

我打开了selected.jquery.js并将问题跟踪到这个调用:

Chosen.prototype.update_results_content = function(content) { return this.search_results.html(content); //<-- Problem here when loading the large amount of HTML into the element }; 

我注意到,在第一次点击后,如果我停止this.search_results.html更新所有后续点击,则多选将不再缓慢响应。 要解决第一次单击的问题,我需要以某种方式预加载内容。 有任何想法吗?

关于如何解决IE的这个性能问题的任何建议 ,或者你知道另一个可以在IE中处理这些大量选项的类似jQuery插件吗? (我试过select2和其他一些无济于事)。

编辑:由于这个问题在一年中变得流行,我想让大家知道我放弃了选择,现在使用Select2 4.0( 具有大数据和无限滚动的出色性能 )。 它似乎是为了让开发人员能够更容易地装饰和改变它而在移动设备上运行。

嗯,这里有一些固有的错误。 那就是, IE糟透了。

即使使用Chrome ,我的引擎上的渲染大约需要840毫秒 。 对于IE ,我们谈论的是3276ms 。 这主要是由于IE呈现DOM的方式Firefox渲染时间为82毫秒

该图表示IE 10,但即使IE 11也存在重大的DOM相关问题 在此处输入图像描述

引用: http //www.tomshardware.com/reviews/chrome-27-firefox-21-opera-next,3534-6.html

不幸的是,您的代码没有问题…您的浏览器存在问题

更深入地看,底层问题是用于在jQuery.html()function中查找脚本标记的rnoInnerhtml RegEx。 在滚动大型数据集时,IE中使用的RegEx非常慢。

 /<(?:script|style|link)/i 

对此RegEx的性能调整可能有助于解决问题。

我还调整了Chosen Scripts和CSS,以减少发出的html的总大小,从而减少数据量。

由于这个问题在一年中变得流行,我想让大家知道我放弃了选择,现在使用Select2 4.0

  1. 它似乎是被选中最广泛接受的inheritance者。
  2. 4.0版本具有出色的性能,具有大数据和无限滚动 。
  3. 它似乎可以让开发人员更容易地装饰和改变它。
  4. 它适用于移动设备(与Selectize不同)。