Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
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

Closed

Description

@floydqwz

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

Activity

  1. caitp commented on Jun 29, 2014

    @caitp
    Contributor

    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

  2. floydqwz commented on Jun 29, 2014

    @floydqwz
    Author

    @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.

  3. caitp commented on Jun 29, 2014

    @caitp
    Contributor

    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

  4. btford commented on Jul 8, 2014

    @btford
    Contributor

    I agree with @caitp, but I'm curious if you have some specific use case for this, @floydqwz.

  5. added this to the milestone on Jul 8, 2014
  6. floydqwz commented on Jul 8, 2014

    @floydqwz
    Author

    @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.

  7. g00fy- commented on Aug 12, 2014

    @g00fy-

    Would it be possible to implement select in a way that would perform lazy rendering ?

    By that I mean:

    1. render only selected/default value.
    2. 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)

  8. petebacondarwin commented on Jan 11, 2015

    @petebacondarwin
    Contributor

    #10639 improves this performance dramatically http://plnkr.co/edit/CBwddTL3WTwEVjAWCOQQ?p=preview

  9. added 3 commits that reference this issue on Jan 11, 2015
    263dd22
    7f3b231
    d43d943
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions