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

Question

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.

Answer 1

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.

1. It's seems to be the most widely accepted successor of Chosen.
2. The 4.0 version has excellent performance with large data and infinite scroll.
3. It seems built to allow developers to decorate and alter it more easily.
4. It works on mobile (unlike Selectize).

Answer 2

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.

Answer 3

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.

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

A performance tweak to this RegEx may help the problem.

I also tweaked the Chosen Scripts and CSS to reduce the total size of the emitted html, which trims down the amount of data.