harvesthq/chosen — pull request #1339 by pfiller (2013-07-08 20:05:49+00:00)
Title: Go Go Go Go Chosen (Chosen gets a speed boost)

@kenearley @stof @koenpunt

Better get ready because this is a big one.

![](https://dl.dropboxusercontent.com/u/3777/Gifs/estelle-deal-with-it.gif)

Chosen has notable speed problems when running with lots and lots of lots of items. Though Chrome can be quite forgiving, there is still a lag when thousands of items are in a list. Forget about using IE8 with thousands of items.

There exists an obvious performance problem with Chosen's current ``winnow_results`` method. For each item in a list, Chosen does a DOM manipulation (to show or hide the element). Each manipulation triggers a reflow which isn't such a big deal for a list of 10 ... but you can see how that would quickly cause Chosen to become sluggish.

In this PR, the ``winnow_results`` method just loops through the ``results_data`` array and marks each result as a match or not. After the results are properly marked, ``results_option_build`` is called and the search results html is re-built. That is, we're replacing ``n`` dom manipulations with just ``1``.

I bet you want stats. For a ``select`` with 1,000 ``option``s:

- Applying Chosen is 62% faster across all browsers
- Showing the search results for the first time is 70% faster across all browsers.
- Showing the search results for the first time is **92%** faster in IE8. **92%**!!!!!
- Searching Chosen is 77% faster.

If we bump the list to 5,000 ``option``s:

- Applying Chosen is _only_ 41% faster.
- Showing the search results for the first time is **89% faster across all browsers**.
- Search Chosen is 72% faster

To get these numbers, I created an HTML page that created a list and ran Chosen 100 times (50 single and 50 multiple) and then I ran it against the new version and the old version. I've shared the [test file](https://gist.github.com/pfiller/830c853dd6e71e06650d) and [the results](https://docs.google.com/a/getharvest.com/spreadsheet/ccc?key=0AkQlIpaza75gdEhmUjBYWUJHTEhEeDE4WHByMk41UUE#gid=0) for those curious.

I don't think these numbers should be treated as scientific, but I do think they are honest. You only need to open a select with 5000 items once in the two different versions of Chosen before you recognize the difference. Chosen is absolutely faster and it feels it.

Now, this is a big change and I would appreciate your careful review. I've done a lot of click testing, but I would love some more. This is a real nice change for Chosen, though, and I'd love to see it land this week.

Thanks!

![](https://dl.dropboxusercontent.com/u/3777/Gifs/github-hoodie-comes-with-high-fives.gif)