Performance issue loading page with large number of selectpickers with relatively large number of options

[dw00001]

Summary: I am building a page that contains a large number of select elements (~200) each with a large number of options (~500). When using selectpicker for these elements the page has a very long load time and encounters the dreaded long running script warning on IE (performance is especially bad on IE). I made a few tweaks to reduce the load times and have attached the test with the tweaked code. Not sure if I have broken any functionality or overlooked any gotchas, but so far the changes seem to work correctly. I wanted to provide these changes to see if some variation could be incorporated into the project to provide similar performance improvement.

Environment details: I encountered the issue in chrome, firefox and IE. Performance is by far the worst in IE. You can see the versions of jquery, bootstrap, and bootstrap-select in the attached example.

I tried to add appropriate comments in the code to explain the changes, but here is a rough summary of the changes:

1. changed code in render to only loop all options when select is multiple. Otherwise just jump to the selected option using native JS. Not a huge savings on chrome, but makes a bigger impact on IE.
2. added a lazyLoadLiElements option. This option basically tells the selectpicker not to actually render the content on the dropdown menu when doing the inital load. A bunch of expensive operations are skipped and then we bind an event so that when the dropdown menu is activated for the first time, we actually render its contents. (it makes the the first time a little slower. it is hardly noticable on chrome. on IE it has a slight pause).
3. As part of lazy load, I disabled the firing of the rendered event on initial loading. This event is super expensive on IE. Looking at the code, this may cause an issue if an invalid option was already selected when the page loaded. Perhaps this functionality can be implemented differently and you could provide an option to turn of this event for those that don't need it.

Instructions for running the test:

1. extract contents of the attached zip file

2. load slow.htm in your browser

3. press "Create Select Fields(native)" button. This will create 200 native select elements each with 500 options on the page

4. press "Selectpicker (orig)" button. This will change the native selects into selectpickers using the original implementation and report the run time.

5. press reset (or refresh the page)

6. press "Create Select Fields(native)" button. This will create 200 native select elements each with 500 options on the page

7. press "Selectpicker(+perf changes)" button. This will change the native selects into selectpickers using the performance tweaks described above and report the run time.

In my testing, I was seeing around an 80% improvement on chrome and around a 95% improvement on IE.
selectpicker.zip

[ghost]

Because we're on github with all of these PR things here's a PR with extracted changes from the archive :-)

We've tried it on some of our pages (worst scenarios) where we have 540 bootstrap-select components with 35 options each. With the changes above Chrome browser spends in init() function ~3s while without those changes it takes ~10s according CPU profiling.

[grosser]

could try lazy-loading #2187

[caseyjhol]

Most of your enhancements have been addressed in one way or another in the latest release - v1.13.6. Using your slow.htm page but with the latest version results in the whole page being loaded in under half a second in Chrome 72. Thanks for your contribution!