Performance tips & techniques
Nir@500tech.com
quick introduction
Nir@500tech.com
Nir Kaufman
Head of AngularJS development department @
Nir@500tech.comNir@500tech.com
all examples and reference code are written in ES6
Nir@500tech.com
It’s really easy to abuse AngularJS
Nir@500tech.com
no conventions. very easy to start to much opinions out there using angular blindly (magic)
Why?
Nir@500tech.com
so, those angular has built-in performance issues?
Nir@500tech.com
just like any other framework. (if you don’t understand what’s going
on under the curtain)
Nir@500tech.com
when you encounter a performance issue, what do you do?
Nir@500tech.com
stack overflow google angular documents source code
Nir@500tech.com
how can we avoid angular performance issues?
Nir@500tech.com
read the source code.https://github.com/angular/angular.js
Nir@500tech.com
rewrite the source code!http://teropa.info/build-your-own-angular/
Nir@500tech.com
optimise compilation
Nir@500tech.com
what’s compile mean in angular?
Nir@500tech.com
The compilation is a process of walking the DOM tree and matching
DOM elements to directives.
Nir@500tech.com
TIP# 1 set the debugInfoEnabled to false
with $compileProvider
Nir@500tech.com
why? AngularJS attaches information about scopes to DOM nodes, and adds CSS
classes to data-bound elements.
Nir@500tech.com
how? production.module.js : 13
Nir@500tech.com
TIP# 2 split your code between compile
and link in custom directives
Nir@500tech.com
why? Angular runs the compile function at
loading, but only once. the link function will run each time the directive is inserted
to the DOM
Nir@500tech.com
how? heavy-lifting.directive.js
Nir@500tech.com
TIP# 3 prefer using ng-if/switch directive
instead of ng-show/hide
Nir@500tech.com
why? The ng-if directive removes or recreates a portion of the DOM. which means that the content won’t be compiled until it visible.
Nir@500tech.com
how? compile.tmpl.html
Nir@500tech.com
optimise the digest cycle
Nir@500tech.com
Nir@500tech.com
digest cycleuser event (ng-click)
tick event (interval)
server response
apply or digest call
start from root
scope
check all watchers on scope
value changed
no changemore
scopes?
switch to scope and continue checking
all doneupdate
UI
angular source code, line 13991
TIP# 4 reduce the number of digests cycles with ng-model-options
why? by default, angular triggers the digest
cycle every time the value changes
how? digest.tmpl.html : 35
Nir@500tech.com
TIP# 5 when make sense, use $digest
instead of $apply
why? $apply calls digest from the rootScope
which may not be necessary
how? digest.tmpl.html : 60
Nir@500tech.com
TIP# 5 prefer DOM manipulation in custom directives when not related to model
Nir@500tech.com
why? the built-in DOM manipulation
directives adds watchers to the scope
how? digest.tmpl.html : 44
Nir@500tech.com
TIP# 6 reduce the number of watchers with oneTimeBinding feature
Nir@500tech.com
why? angular invoke all the watchers that registered on the scope on
each digest
how? digest.tmpl.html : 75
Nir@500tech.com
optimise ng-repeat
Nir@500tech.com
TIP# 7 always use ‘track by’ in ngRepeat
to maximise performance
Nir@500tech.com
why? ng-repeat destroy an recreate DOM
nodes when the data is refreshing
how? repeater.tmpl.html : 20
Nir@500tech.com
TIP# 8 use ng-hide when filtering the
repeated items
Nir@500tech.com
why? ng-repeat removes DOM nodes from
your HTML and recreate them on filtering
how? repeater.tmpl.html : 82
Nir@500tech.com
TIP# 9 use ng-if to link DOM elements on demand
Nir@500tech.com
why? ng-if removes nodes from the
DOM so the list will render faster
how? repeater.tmpl.html : 54
Nir@500tech.com
going to production
Nir@500tech.com
TIP# 10 decorate AngularJS
$exceptionHandler with your own logic
Nir@500tech.com
why? uncaught exceptions in angular
expressions is delegated to this service
how? exception-handler.decorator.js
Nir@500tech.com
TIP# 11 always use $log service for
you debug logs
Nir@500tech.com
why? you can switch the $log
service debug method off on production
how? production.module.js : 12
Nir@500tech.com
TIP# 12 bootstrap in strictDi mode
Nir@500tech.com
why? even if you use automated tools to guarantee implicit strict-di mode will backup you by throwing exceptions
how? main.module.js : 25
Nir@500tech.com
TIP# 13 cache your templates
Nir@500tech.com
why? angular loads templates
dynamically using http when they requested for the first time
how? gulpfile.js
Nir@500tech.com
grab the code
https://github.com/nirkaufman/angularjs-performance-tips
http://tinyurl.com/pwodl8b