3

I have problems with AngularJS performance when showing many items in a <select>. I have created a fiddle where the problem can be seen:

http://jsfiddle.net/2W7Kx/1/

Selecting an item takes several seconds.

Interestingly the problem only occurrs when selecting an item the FIRST time. After that, selecting an item is fast.

Why? What is causing this slowness? Is there a workaround?

Markus Johansson
  • 3,733
  • 8
  • 36
  • 55
  • @Blackhole: Thanks, you are right. Should be the right one now. – Markus Johansson Jun 28 '14 at 21:27
  • It is slow because $scope is watching all 25,000 options you've created to see if any of them have changed. I believe there is a way to stop watching them, but I'm not sure how. Look up $digest and $watch. Is this a realistic scenario - that you will have 25k options in a drop down? If so, may God have mercy on your soul. :) – Adam Jul 01 '14 at 02:27
  • No, 25k is not realistic right now, but 2.5k is the number of items I have in my app. I added 25k in the fiddle just so make a point, so that it is clearly visible. For me 2.5k causes a noticable lag which is very annoying. – Markus Johansson Jul 01 '14 at 16:12

1 Answers1

0

I believe the "why" and "what" of this is due to the method Angular uses to render content through dirty-checking. Here is a more in depth answer: How does data binding work in AngularJS? . Also, there is some useful info on scope rendering in the Angular docs that might shed a little more light on it for you. https://docs.angularjs.org/guide/scope .

Community
  • 1
  • 1
tarrball
  • 2,123
  • 3
  • 23
  • 34