You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
Repository navigation
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
Bad performance when selecting an item the first time in select with many items #8019
When having many items in a (more than a couple of thousand items), selecting an item becomes really really slow the first time. In this example I add 25000 items. Selecting an item the first time takes around 12s.
http://jsfiddle.net/2W7Kx/1/
Seems like "function render()" is responsible for almost all execution time, with these two lines being suspicious:
// TODO(vojta): can't we optimize this ?
scope.$watch(render);
I also initially added a stackoverflow question about the issue: http://stackoverflow.com/questions/24470563/angularjs-performance-for-select
@caitp: I don't think that's a valid comparison. In my fiddle all the items can be shown quickly, but selecting one is what takes time. In your fiddle it's the creation of the option elements which take time.
not when I ran your reproduction --- creating the list takes a huge (and similar) amount of time in your fiddle, and selecting a new object is slightly faster in vanillaJS, but not by a whole lot.
I think you should probably avoid using these huge lists in your form controls anyways, it's a pretty terrible user interface when you get down to it
@btford: The use case is that I have a member database (2500 members). I want to select one of the members. Simple as that. Maybe there is a better way than using a since it seems a bit slow together with angular.
Would it be possible to implement select in a way that would perform lazy rendering ?
By that I mean:
render only selected/default value.
on focus render the whole list, without using $apply
This would improve performance apps that have a large list of items like @floydqwz and most of the time the select input isn't even used (but is the bottleneck)
Activity
caitp commentedon Jun 29, 2014
It takes a pretty stupidly long time with vanilla JS too: http://jsfiddle.net/P9mJQ/
I haven't looked at the numbers, so there might be marginal differences, but it actually feels pretty similar to the performance in AngularJS
floydqwz commentedon Jun 29, 2014
@caitp: I don't think that's a valid comparison. In my fiddle all the items can be shown quickly, but selecting one is what takes time. In your fiddle it's the creation of the option elements which take time.
caitp commentedon Jun 29, 2014
not when I ran your reproduction --- creating the list takes a huge (and similar) amount of time in your fiddle, and selecting a new object is slightly faster in vanillaJS, but not by a whole lot.
I think you should probably avoid using these huge lists in your form controls anyways, it's a pretty terrible user interface when you get down to it
btford commentedon Jul 8, 2014
I agree with @caitp, but I'm curious if you have some specific use case for this, @floydqwz.
floydqwz commentedon Jul 8, 2014
@btford: The use case is that I have a member database (2500 members). I want to select one of the members. Simple as that. Maybe there is a better way than using a since it seems a bit slow together with angular.
g00fy- commentedon Aug 12, 2014
Would it be possible to implement select in a way that would perform lazy rendering ?
By that I mean:
This would improve performance apps that have a large list of items like @floydqwz and most of the time the select input isn't even used (but is the bottleneck)
petebacondarwin commentedon Jan 11, 2015
#10639 improves this performance dramatically http://plnkr.co/edit/CBwddTL3WTwEVjAWCOQQ?p=preview
fix(ngOptions): ensure that the correct option is selected when optio…
fix(ngOptions): ensure that the correct option is selected when optio…
fix(ngOptions): ensure that the correct option is selected when optio…