Bootstrap select loading takes too long in IE

Question

I'm loading 1000 records to a bootstrap select dropdownlist. It takes about 2 seconds in Chrome but takes 30 seconds in IE 9. Also, cancel or x out the bootstrap modal in IE takes 10+s too. The API call is ok but the rendering is so slow; Could some one give me some direction?

So I'm loading a list of customers and setting the selected. Here is the code.

    var customerPicker = $('#customer-picker');
    API.getCustomers().then(function (result) {
        loadDropdown(customerPicker, result.customers); 

        // set the selected to current customer; it takes 10s in IE
        customerPicker.val(currentCustomerId).selectpicker('refresh'); 

        // it takes about 10s in IE too. selector is the bs modal div
        $(selector).css('z-index', '1060').modal('show'); 
    }).catch(function (errorMessage) {
        ToastManager.showError(errorMessage || 'An error occurred while loading customer list. Please try again.');
    });

    function loadDropdown($div, arr) {
        var options = '';
        $.each(arr, function (i, item) {
            options = options + '<option value="' + item.Value + '">' + item.Text + '</option>';
        });
        $div.html(options);
    }

What version of jQuery are you using? It's quite possible that you may solve this by trying different jQuery releases since both functions you mentioned deal directly with js. — Serg Chernata, Jan 17 '17 at 12:07
A quick search on the issues for this repo on github shows that performance for large datasets is lacking: https://github.com/silviomoreto/bootstrap-select/issues May want to look into a different solution for handling the number of options you're rendering. — Tim Lewis, Jan 19 '17 at 16:33
Using a select to present 1000 records doesn't usually make for the best UI to the user. Having to scroll through that many records isn't usually welcome. Can you consider something like an autocomplete dropdown so as the user starts to type the name then you filter and display all matching records? — David Brown, Jan 23 '17 at 12:51

score 2 · Answer 1 · answered Jan 19 '17 at 16:26

2

Have you tried setting the innerHTML inside of the loop;

 $div[0].innerHTML += '<option value="' + item.Value + '">' + item.Text + '</option>';

Instead of this at the end.;

 $div.html(options);

answered Jan 19 '17 at 16:26

Liam

114
5

score 1 · Answer 2 · answered Jan 20 '17 at 07:44

Perhaps you wish to consider a serialization library to handle with how many records it's really loading at once. Clusterize.js is a very well made one, and only allows the browser to render currently being viewed by the client. It shows anywhere up to 100,000+ records to be handled in this manner.

https://clusterize.js.org/

score 0 · Answer 3 · answered Jan 18 '17 at 14:57

0

you can use :
Select2 kind of utility loading 1000+ record is not a good idea.
https://select2.github.io/examples.html

answered Jan 18 '17 at 14:57

Mantu Nigam

3,690
7
24
41

score 0 · Answer 4 · edited May 23 '17 at 12:09

0

Jquery can experience a performance hit in older browsers. Here's a solution similar to what you're experiencing. $.each() is already pretty slow compared to native JS.

edited May 23 '17 at 12:09

Community

1
1

answered Jan 23 '17 at 21:48

ndkline

1
3

Bootstrap select loading takes too long in IE

4 Answers4