jQuery plugin Chosen (enhances mutliselects) works great in Chrome, but slow in Internet Explorer

问题

I'm currently using the Chosen jQuery plugin. Check out my fiddle here: http://jsfiddle.net/3XWSe/

Try the fiddle in both Chrome and Internet Explorer (I tested using IE version 11).

Notice there is a delay (4 or 5 seconds) when clicking on the multiselect in Internet Explorer, as compared to very little, almost none, in Chrome. This example dropdown is listing all the cities in Texas and has close to 5000 options.

I opened up chosen.jquery.js and traced the problem to this call:

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
};

I noticed that after the first click, if I stop this.search_results.html from updating on all subsequent clicks, the multiselect will no longer respond slowly. To fix the problem for the first click I would need to perhaps preload the content somehow. Any ideas?

Any suggestions on how to fix this performance issue for IE, or do you know of another comparable jQuery plugin that can handle these large amounts of options in IE? (I've tried select2 and some others to no avail).

EDIT: Since this question has become popular over the year, I want to let everyone know that I abandoned Chosen and now use Select2 4.0 (which has excellent performance with large data and infinite scroll). It seems built to allow developers to decorate and alter it more easily and works on mobile.

回答1:

Well, there is something inherently wrong here. That being, IE sucks.

Even with Chrome, the rendering on my engine takes about 840ms. For IE, we're talking about 3276ms. This is due mainly to the way that IE renders the DOM. Firefox renders in 82ms.

This figure indicates IE 10, but even IE 11 has significant DOM related problems

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

Unfortunately, there is no problem with your code... there is a problem with your browser.

回答2:

Looking at this deeper, the underlying issue is the rnoInnerhtml RegEx used to look for Script tags in the jQuery.html() functionality. The RegEx used there is very slow in IE when rolling over large data sets.