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.

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

Make option icons optional to improve performance. #207

Closed
wbobeirne opened this issue Sep 26, 2013 · 4 comments
Closed

Make option icons optional to improve performance. #207

wbobeirne opened this issue Sep 26, 2013 · 4 comments
Assignees

Comments

@wbobeirne
Copy link

Hey Greg, huge fan of the plugin, gave me exactly what I needed for a custom select box.

However, I ran in to performance issues pretty quickly. I've got a fairly complicated form with ~30 selects, and the plugin was locking my page up for ~1.7s. Obviously part of the problem is a page with 30 select boxes, but might as well improve performance where possible. After some profiling, I found that width measurements are the most expensive operations performed. Disabling autoWidth helped some, but the most expensive thing was the option icons (http://gregfranko.com/jquery.selectBoxIt.js/index.html#IconsandImages)

The following block of code: https://github.com/gfranko/jquery.selectBoxIt.js/blob/master/src/javascripts/jquery.selectBoxIt.js#L668-L674 is incredibly expensive, so instead of assuming it'll use an image, and then removing if it doesn't, this should be a parameter (i.e. noIcons: true)

I can do a pull request for this in a while, but I wanted your opinion on this before I put the work in. In the mean time for my case, I've just cut out all of the code relevant to dropdownImageContainer.

Thanks!

@ghost ghost assigned gfranko Sep 26, 2013
@gfranko
Copy link
Owner

gfranko commented Sep 26, 2013

@wbobeirne I would be more than happy to support a noIcons option to improve performance for your use case. I have been meaning to do a performance audit for quite some time for SelectBoxIt anyway. Also, do you have a public url for your page so that I can profile it?

Don't worry about sending a PR for this. I am planning on releasing updates to the dev branch today with a few fixes and performance improvements (including this). I'll let you know when the dev repo is updated so that you can test out the new changes.

@wbobeirne
Copy link
Author

Thanks for the quick response!

Unfortunately I don't have a publicly available URL for you as I'm still working on the switchover from regularly styled form elements to custom elements, and I'm not launching the switchover until all the kinks have been sorted.

Thanks for sorting this out,
-Will

@gfranko
Copy link
Owner

gfranko commented Oct 4, 2013

I just released v3.8.0, which improves performance.

@gfranko gfranko closed this as completed Oct 4, 2013
@shahafabileah
Copy link

I'm seeing the same issue.

I'm using selectBoxIt version 3.8.1 so I should have the perf improvements from Oct 2013. I'm doing my measurements on Chrome version 37.0 on Mac OSX.

I have an internal page that has a table with 100 rows. Each row has 2 select elements.

I found that it took about 6 seconds to initialize all these select elements. After setting autoWidth to false, the time dropped to 5.5 seconds.

I don't see a noIcons option so I gather that it was never added.

Are there any other suggestions to improve performance?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants