2

I am about to build a new single page web application where I think the main view will be quite complex and I am tring to decide whether to use Angular.js. My concern is whether there will be too much data-binding causing the performance of the UI to become sluggish.

The app will have a view consisting of 2 panels. One will have 8 tabs each containing a table with 3 cols, 40 rows and one col in each row having a list of numbers (upto 4 numbers) where each number is clickable (clicking a number causes something to happen in the other pane). I was considering using the ng-repeat directive to dynamically create the tabs and tables and list of numbers from data provided from the backend as the content will be different for different users. So I think that would mean 8 * (2 + 4) * 40 (1920) items having watches added to the $watch list. I think this means that a lot of things will be checked each time round the $digest loop even although these items will never change once they have been created the first time.

The 2nd pane will have other tabs and items although not so many as in the first pane so over all there will be over 2000 items involved with data-binding if I use AngularJS and ng-repeat.

Is this too many items for one view when using AngularJS i.e. will the UI performance become sluggish with this number of items?

Are there any alternative ways of dynamically creating tabs and tables using AngularJS that don't use ng-repeat in order to keep the number of data-binding items down?

KennyE
  • 513
  • 6
  • 15

2 Answers2

3

Some optimizations that i can suggest of would be

  • Look at bindonce directive. This does not create a watch once data is bounded. This should fix most of your issues.
  • Use directives like ng-if these destroy\create the DOM based on conditions. If a tab is not in focus what is the point having data bounded to it. Do binding just in time. And maybe destroy the page DOM once the focus on tab is lost (with ng-if) only.

Also test you app with dummy data, to verify how the real performance is and whether it makes sense to try the second option i have mentioned.

Chandermani
  • 42,589
  • 12
  • 85
  • 88
  • 1
    I found this answer particularly useful, but before you download [bindonce](https://github.com/Pasvaz/bindonce)...as of angular 1.3 there's a way to bind once built-in...[AngularJS: Developer Guide / Expressions / One-time binding](https://code.angularjs.org/1.3.17/docs/guide/expression#one-time-binding) – MikeM Jul 26 '15 at 18:46
0

Here on StackOverflow is a great answer of Misko, talking about performance.

TL;DR: 2000 elements should be fine!

Community
  • 1
  • 1
Blackhole
  • 20,129
  • 7
  • 70
  • 68