Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Performance
Angularjs
What is Angulars biggest
performance bottleneck?
The $digest cycle (a.k.a. dirty
checking)
How the $digest cycle works
When Angular (or you) calls $scope.$apply, this kicks off the $digest cycle.
$rootScope
$scope...
How the $digest cycle works
During the digest cycle, Angular will check every $scope for all Angular
bindings to see if an...
How the $digest cycle works
If any binding has changed, Angular will finish the current cycle and then start
the loop over...
How the $digest cycle works
A $digest cycle will only complete when no Angular bindings have changed.
$rootScope
$scope
ng...
How the $digest cycle works
This means that any change will cause the $digest cycle to run at least twice;
once to update ...
Improving $digest performance
● Reduce number of bindings
o use native DOM
o ng-if instead of ng-hide
o clean up $watchers...
Use Native DOM
Just because you are using Angular as a framework does not mean you have
to do everything the “Angular” way...
Use ng-if instead of ng-show
ng-show just hides the DOM using display:none; However, this keeps all the
bindings of the el...
Clean up $watchers
Sometimes you only need to $watch for a change once and then no longer
need to watch for any changes an...
Avoid ng-repeat
ng-repeat has some big performance problems, especially with large data sets.
ng-repeat adds lots of bindi...
Avoid ng-repeat
Each of these bindings will be checked on every $digest, even if the list didn’t
change.
Even worse, when ...
Avoid filters
Filters will be run on every $digest, even if the binding attached to the filter
didn’t change.
Filters such...
Use Simple Logic in Bindings
Because dirty-checking requires a comparison check of the old value to the
new value, the fas...
Avoid Functions in Bindings
Functions in bindings are bad from a performance point of view.
A function inside a binding ( ...
Avoid Functions in Bindings
Types of Functions:
● Just returns variable - get rid of the function and just use the variabl...
Upcoming SlideShare
Loading in …5
×

Angularjs Performance

6,086 views

Published on

How the Angular $digest cycle works, why it's the bottleneck to Angular performance, and how to improve it.

Published in: Software
  • Check the source ⇒ www.WritePaper.info ⇐ This site is really helped me out gave me relief from headaches. Good luck!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❤❤❤ http://bit.ly/39sFWPG ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/39sFWPG ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @Alexey Migutsky Not at all. Angular, like any framework, has it's pros and cons. Angular is not slow by design, it's actually very fast. It's developers who are unaware of it's pitfalls that make it slow.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Angularjs Performance

  1. 1. Performance Angularjs
  2. 2. What is Angulars biggest performance bottleneck?
  3. 3. The $digest cycle (a.k.a. dirty checking)
  4. 4. How the $digest cycle works When Angular (or you) calls $scope.$apply, this kicks off the $digest cycle. $rootScope $scope $scope $scope.$apply
  5. 5. How the $digest cycle works During the digest cycle, Angular will check every $scope for all Angular bindings to see if any have changed. $rootScope $scope ngBinding ngBinding $scope ngBinding Changed?
  6. 6. How the $digest cycle works If any binding has changed, Angular will finish the current cycle and then start the loop over again checking to see if the change affected other bindings. $rootScope $scope ngBinding ngBinding $scope ngBinding Changed? Yes Changed? No Changed? No (restart cycle)
  7. 7. How the $digest cycle works A $digest cycle will only complete when no Angular bindings have changed. $rootScope $scope ngBinding ngBinding $scope ngBinding Changed? No Changed? No Changed? No ($digest completed)
  8. 8. How the $digest cycle works This means that any change will cause the $digest cycle to run at least twice; once to update the binding and again to ensure that no other bindings were changed. Example: If your app has 200 bindings, Angular will run at least 400 dirty checks when a binding changes.
  9. 9. Improving $digest performance ● Reduce number of bindings o use native DOM o ng-if instead of ng-hide o clean up $watchers when no longer needed o avoid ng-repeat where possible o avoid filters where possible ● Simplify logic in bindings o use simple comparisons o avoid binding to functions where possible
  10. 10. Use Native DOM Just because you are using Angular as a framework does not mean you have to do everything the “Angular” way. One of the nice things about Angular is that you can choose when and when not to use it. If your DOM won’t change very often or only at certain, controllable times, you can use native DOM manipulation instead of relying on Angular bindings. Code Example
  11. 11. Use ng-if instead of ng-show ng-show just hides the DOM using display:none; However, this keeps all the bindings of the element and it’s children. ng-if removes the DOM and all of it’s bindings. caveat: ng-if manipulates the DOM, which can become more expensive if the ng-if changes state a lot.
  12. 12. Clean up $watchers Sometimes you only need to $watch for a change once and then no longer need to watch for any changes anymore. The $scope.$watch() function returns a function that you can use to remove the watch binding. var unWatch = $scope.$watch(‘contact’, function() { // do some logic unWatch(); // unbind watcher as no longer needed });
  13. 13. Avoid ng-repeat ng-repeat has some big performance problems, especially with large data sets. ng-repeat adds lots of bindings to the DOM (1 for itself + n bindings inside the repeat * num of items in collection) <div ng-repeat=”item in list”> <div>{{hello}} <span>{{goodbye}}</span></div> </div> bindings = (2 bindings * list length) + ng-repeat [list of 10 items = 21 bindings]
  14. 14. Avoid ng-repeat Each of these bindings will be checked on every $digest, even if the list didn’t change. Even worse, when the list does change, it will manipulate the DOM, which depending on what you are doing, can be expensive. This is the exact same problem with filters.
  15. 15. Avoid filters Filters will be run on every $digest, even if the binding attached to the filter didn’t change. Filters such as lowercase, date, and orderBy are bad because they will transform the DOM at every $digest. Instead, you can use the $filter provider and save the filtered result to be displayed into the DOM. Code Example
  16. 16. Use Simple Logic in Bindings Because dirty-checking requires a comparison check of the old value to the new value, the faster the comparison the faster the $digest cycle will run. Comparisons to primitives and shallow equality of objects are the fastest. Deep equality of objects are slow (so don’t do it).
  17. 17. Avoid Functions in Bindings Functions in bindings are bad from a performance point of view. A function inside a binding ( {{fn()}} ) will be called at every $digest (having function call overhead). A function inside an ng-repeat will be called for every item in the collection. This doesn’t mean that functions inside ng-click are bad, since it will only be called when the element is clicked on.
  18. 18. Avoid Functions in Bindings Types of Functions: ● Just returns variable - get rid of the function and just use the variable directly ● Performs some logic - try to pre-compute the logic once and then save the result to be used in a binding

×