2

My app seems to have views with a lot of logic in them. My question is two fold:

  1. Does logic in the view slow down angular app performance?

  2. As a best practice, is it better to treat this logic in the controller and just store the outcome in a $scope attribute which the view can access ? Would this improve performance ?

Example of views in our app (a simple one): 

<div class="small-12 column" id="notificationMsg">
    {{ config.message | translate : config.getMessageParams(notification)}}
</div>
user5680735
  • 703
  • 2
  • 7
  • 21
trk
  • 2,106
  • 14
  • 20

2 Answers2

3

short answer: yes

long answer:

your bindings will have to be updated in every digest cycle which affects the used variables. storing the value in a variable and only updating it if something changes will improve your performance. however this will only be critical if you reach a certain amount of complexity. as long as your app doesn't grow too much this won't be a threat to think about - yet.

i wouldn't necessarily call it a best practice, because it can make your code more complex and harder to read/understand/maintain. performance isn't always an issue. it just starts to be one as soon as it's absent by default ;)

a further improvement you can do is use ng-bind and ng-bind html instead whenever possible, because it can be rendered faster, since it can skip some internal steps of angularJS whilst compiling the expression.

so e.g. use

<div ng-bind="foo"></div>

instead of 

<div>{{ foo }}</div>

if possible

Patrick Kelleter
  • 2,631
  • 1
  • 13
  • 19
  • can you provide the source of this? because i believe that a lot of people just thought until now that it was the same thing but it prevented the data flash of the curly braces, that could be resolved with the ng-cloak. other [link](http://stackoverflow.com/questions/16125872/angularjs-why-ng-bind-is-better-than-in-angular) – Jose Rocha Mar 08 '16 at 08:00
  • unfortunately i can't remember any primary sources, although i'm sure that they exist because i've read them here is a more detailed and highly upvoted post about ng-bind - and it's performance boost: http://stackoverflow.com/questions/16125872/angularjs-why-ng-bind-is-better-than-in-angular/23382400#23382400 – Patrick Kelleter Mar 08 '16 at 08:06
  • Thanks. But so it's better to remember the OP that with ng-bind it will lose the 2 way binding and if it is ok to lose the 2 way binding it is better to use {::}. for what i understand. – Jose Rocha Mar 08 '16 at 08:09
  • this post is about the difference of ng-bind and {{ expression }}. those both don't provide "two-way-binding" it's both just one-way-binding, because the expression can't change the value of the variable anyway. so this has nothing to do with {::} to be fair – Patrick Kelleter Mar 08 '16 at 08:26
  • I don't thinks your last argument is right : the problem with {{}} is that when you have blablabla {{foo}} blblbl Angular will watch the whole string instead of just {{foo}} which is heavier. This is why you use ng-bind instead. – Walfrat Mar 08 '16 at 08:35
  • no that's not true. if you do not use ng-bind angular will have to use $interpolate at some point, because it "doesnt know" what is inside the div. that is why it is much slower and if you just have one expression in your div it is recommended to use ng-bind instead to boost your performance – Patrick Kelleter Mar 08 '16 at 08:54
1

The key concept behind these performance considerations is reducing the number of $$watchers inside Angular to improve the $digest cycle’s performance, something you’ll see and hear more of as you continue working with Angular. These are crucial to keeping our application state fast and responsive for the user. Each time a Model is updated, either through user input in the View, or via service input to the Controller, Angular runs something called a $digest cycle.

This cycle is an internal execution loop that runs through your entire application’s bindings and checks if any values have changed. If values have changed, Angular will also update any values in the Model to return to a clear internal state. When we create data-bindings with AngularJS, we’re creating more $$watchers and $scope Objects, which in turn will take longer to process on each $digest. As we scale our applications, we need to be mindful of how many scopes and bindings we create, as these all add up quickly - each one being checked per $digest loop.

Angular runs every single filter twice per $digest cycle once something has changed. This is some pretty heavy lifting. The first run is from the $$watchers detecting any changes, the second run is to see if there are further changes that need updated values.

Here’s an example of a DOM filter, these are the slowest type of filter, preprocessing our data would be much faster. If you can, avoid the inline filter syntax.

{{ filter_expression | filter : expression : comparator }}

Angular includes a $filter provider, which you can use to run filters in your JavaScript before parsing into the DOM. This will preprocess our data before sending it to the View, which avoids the step of parsing the DOM and understanding the inline filter syntax.

$filter('filter')(array, expression, comparator);

Yes, for better performance, Use 

$scope.description: $translate.instant('DESCRIPTION')

in Controller, instead of,

{{'DESCRIPTION' | translate }}

Furthermore,

It depends on what you want to achieve. Here is another way to increase performance. One Time Binding

Angular 1.3 added :: notation to allow one time binding. In summary, Angular will wait for a value to stabilize after it’s first series of digest cycles, and will use that value to render the DOM element. After that, Angular will remove the watcher forgetting about that binding.

Muhammad Abid
  • 801
  • 4
  • 12