DIVE INTO ANGULAR,PART 3: PERFORMANCE

_by Oleksii Prohonnyi

AGENDA How to measure performance Watchers minimization Bind once Filters and cache Ng-Repeat Ng-Model Ng-If vs Ng-Show $$apply vs $$digest References

HOW TO MEASURE PERFORMANCE

HOW TO MEASURE PERFORMANCE Chrome Dev. Tools Batarang console.time

HOW TO MEASURE PERFORMANCE: DEV.TOOLS

HOW TO MEASURE PERFORMANCE: BATARANG

HOW TO MEASURE PERFORMANCE: CONSOLE

WATCHERS MINIMIZATION

WATCHERS MINIMIZATION Angular uses dirty checking to keep track of all the changes in

app. This means it will have to go through every watcher to check if

they need to be updated (call the digest cycle). If one of the watcher is relied upon by another watcher, Angular

would have to re-run the digest cycle again, to make sure that all of the changes has propagated.

It will continue to do so, until all of the watchers have been updated and app has stabilized.

WATCHERS MINIMIZATIONWatches are set on: $scope.$watch {{ }} type bindings Most directives (i.e. ng-show) Scope variables scope: { bar: '='} Filters {{ value | myFilter }} ng-repeat

WATCHERS MINIMIZATIONWatchers (digest cycle) run on: User action (ng-click etc). Most built in directives will call

$scope.apply upon completion which triggers the digest cycle.

ng-change ng-model $http events (so all ajax calls) $q promises resolved $timeout $interval Manual call to $scope.apply and $scope.digest

BIND ONCE

BIND ONCE 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.

See more: code.angularjs.org

FILTERS AND CACHE

FILTERS AND CACHE One time binding does not seem to play well with filters. There seems to be workarounds to make it work, but I think it’s

cleaner and more intuitive to simply assign the needed value to a variable (or set it as a property on an object, if you are dealing with a lot of variables).

See more: code.angularjs.org

FILTERS AND CACHE Instead (HTML):

Do (JavaScript):

Do (HTML):

FILTERS AND CACHE Instead (HTML):

Do (JavaScript):

Do (HTML):

NG-REPEAT

NG-REPEATngRepeat uses $watchCollection to detect changes in the collection. When a change happens, ngRepeat then makes the corresponding changes to the DOM: When an item is added, a new instance of the template is added

to the DOM. When an item is removed, its template instance is removed from

the DOM. When items are reordered, their respective templates are

reordered in the DOM.

See more: code.angularjs.org

NG-MODEL

NG-MODEL If you know there is going to be a lot of changes coming from an

ng-model, you can de-bounce the input. For example if you have a search input like Google, you can de-

bounce it by setting the following ng-model option:ng-model-options="{ debounce: 250 }.

This will ensure that the digest cycle due to the changes in this input model will get triggered no more then once per 250ms .

See more: code.angularjs.org

NG-IF VS NG-SHOW

NG-IF VS NG-SHOW ng-show will render an element, and use display:none to

hide it, ng-if will actually removes the element from DOM, and will re-

create it, if it’s needed. You may need ng-show for an elements that toggles on an off

often, but for 95% of the time, ng-if is a better way to go.

See more: docs.angularjs.org, docs.angularjs.org

$$APPLY VS $$DIGEST

$$APPLY VS $$DIGEST When $scope.$apply() is called, it kicks the entire

application into the $digest loop and in turn runs $rootScope.$digest().

This is what actually kicks off the internal $digest cycle. This cycle processes all of the watchers of the $scope it was

called from (and its children) until no more listeners can be fired. Instead of $scope.$apply, we could turn to $scope.

$digest, which runs the exact same $digest loop, but is executed from the current $scope downwards through its children, a much less costly venture.

See more: binpress.com

REFERENCES

REFERENCES https://ng-perf.com/ http://www.codelord.net/2014/06/17/angular-performance-101-sli

des/

http://www.alexkras.com/11-tips-to-improve-angularjs-performance/

https://medium.com/developers-writing/tips-and-practices-to-optimize-your-angularjs-app-8118550ff808#.4vmopptk9

http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/ https://

www.binpress.com/tutorial/speeding-up-angular-js-with-simple-optimizations/135

https://www.airpair.com/angularjs/posts/angularjs-performance-large-applications

HOME TASK

HOME TASK Main idea: ruin performance of the application created after 2nd

meetup and optimize it using recommendations described above. Technical details:

– Update your application with more data, directives, DOM to gather bad performance issues in it:

• at least 1000 rows in table on home page,• at least 2000 watchers in the application.

– Optimize it using recommendations from today’s meeting. Download 2nd meetup’s application: github.com

Oleksii Prohonnyi

facebook.com/oprohonnyi

linkedin.com/in/oprohonnyi