Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bootstrap-select is slow #1709

Closed
Machou opened this issue Apr 25, 2017 · 16 comments
Closed

bootstrap-select is slow #1709

Machou opened this issue Apr 25, 2017 · 16 comments
Labels
performance
Milestone
v1.14.0

Comments

@Machou
Copy link

Machou commented Apr 25, 2017

Hello

How to load bootstrap-select so that it is loaded faster? Because it takes 1 second before loading my select, it is relatively long.
@davidenco
Copy link

Same here. Everything else has loaded before the select, and even then it takes it 0.5 seconds to load. I only have half a dozen options in the list too!!

@phil-a
Copy link

phil-a commented Jun 28, 2017

I am having this issue as well. It is especially noticeable if you have many images or elements on the page, it seems to wait for them all to finish loading before it shows the select.

@davidenco
Copy link

davidenco commented Jun 28, 2017 •
edited
Loading

I fixed the rendering delay by loading only jQuery and Bootstrap-Select in the <head> and the rest of the JS including Bootstrap below the </body>, then just after each </select>, add this:

<script type="text/javascript">$('#myselect').selectpicker('render');</script>

Now all selects load before the page has finished rendering.

@caseyjhol caseyjhol added this to the v1.13.0 milestone Jul 12, 2017
@bigalnz
Copy link

bigalnz commented Aug 7, 2017 •
edited
Loading

I too have the same issue. I did what davidenco suggested and it is fixed.

@bigalnz
Copy link

bigalnz commented Oct 1, 2017

While the rendering of the selects after davidenco fix helped, now when I use the select and pick a option it is slow to close the menu.

@traycho-zz
Copy link

Only <script type="text/javascript">$('#myselect').selectpicker('render');</script> is enough, hope we see the improvement next release

@AdamFu
Copy link

AdamFu commented Jul 31, 2018

same problem.fixed by
$(function(){ $(".selectpicker").selectpicker('render'); })

@davidenco
Copy link

Or this?

$({$(".selectpicker").selectpicker('render');});

@caseyjhol caseyjhol modified the milestones: v1.13.0, v1.14.0 Aug 29, 2018
@avilas
Copy link

avilas commented Feb 7, 2019

Thank you so much..!

caseyjhol added a commit that referenced this issue Mar 2, 2019
@caseyjhol
use pure JS inside createLi loop instead of jQuery (performance boost) (
5ea2f57 
#1665, #1709)
caseyjhol added a commit that referenced this issue Mar 2, 2019
@caseyjhol
use pure JS inside createLi loop instead of jQuery (performance boost) (
74043c4 
#1665, #1709)
@caseyjhol
Copy link
Member

Note to self:

Use document.ready instead of window.load to auto-initialize bootstrap-select.

@MuraliM
Copy link

MuraliM commented May 28, 2019 •
edited
Loading

have more than 30 select boxes in my page. Each select box has around 300+ options. So we staretd using this select picker to allow user to quickly type and pick the one. However, now its making lots of performance issues and we are in trouble now.

This select box has been created as reusuable angular component and we apply selectpicker in once the view was initialized using ### ngAfterViewInit

Each of them may or may not have a initial value set

 ngAfterViewInit() {
  jQuery("#mySelect10").selectpicker();
  jQuery("#mySelect10").selectpicker('val', 10); // sets the value, if it is present, ex 10 is value here
}

I tried with but still no change. Takes more time to load the page

 ngAfterViewInit() {
  jQuery("#mySelect10").selectpicker('render');
  jQuery("#mySelect10").selectpicker('val', 10); // sets the value, if it is present, ex 10 is value here
}

In IE 11, it is even very slow. User has to wait for nearly 30 seconds to see the view/UI.

@caseyjhol Is there any workaround on this performance issue? The plugin looks really great, except this performance issue

I tired updated to version 1.13.10, but still no luck :(

caseyjhol added a commit that referenced this issue Apr 23, 2020
@caseyjhol
use document ready to auto-init bootstrap-select (#1709)
d5b3a34
@caseyjhol
Copy link
Member

This change will be a part of the v1.14.0 release. This issue will be updated after it's made available.

caseyjhol added a commit that referenced this issue Apr 24, 2020
@caseyjhol
use document ready to auto-init bootstrap-select (#1709)
ca4d865
caseyjhol added a commit that referenced this issue May 7, 2020
@caseyjhol
use DOMContentLoaded instead of document.ready (#1709)
f98e9b5
caseyjhol added a commit that referenced this issue May 8, 2020
@caseyjhol
use document ready to auto-init bootstrap-select (#1709)
1dbd8cf
caseyjhol added a commit that referenced this issue May 8, 2020
@caseyjhol
use DOMContentLoaded instead of document.ready (#1709)
5e4d565
caseyjhol added a commit that referenced this issue Nov 28, 2020
@caseyjhol
use document ready to auto-init bootstrap-select (#1709)
ef2ee52
caseyjhol added a commit that referenced this issue Nov 28, 2020
@caseyjhol
use DOMContentLoaded instead of document.ready (#1709)
8eb53ee
@caseyjhol
Copy link
Member

Released in v1.14.0-beta!

@ubertil
Copy link

ubertil commented Dec 5, 2020

Still very slow on page with multiple selects with thousands of options

@caseyjhol
Copy link
Member

@ubertil With v1.14.0-beta? Can you link me to an example?

@WafiqSalie WafiqSalie mentioned this issue Jun 30, 2021
Open
@Sublime1
Copy link

Hi @caseyjhol you have this flagged as a breaking change - can you explain a little more about this please?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
performance
Projects
None yet
Milestone
v1.14.0
Development

No branches or pull requests