Performance tips & techniques
[email protected]
quick introduction
[email protected]
Nir Kaufman
Head of AngularJS development department @
[email protected]@500tech.com
all examples and reference code are written in ES6
[email protected]
It’s really easy to abuse AngularJS
[email protected]
no conventions. very easy to start to much opinions out there using angular blindly (magic)
Why?
[email protected]
so, those angular has built-in performance issues?
[email protected]
just like any other framework. (if you don’t understand what’s going
on under the curtain)
[email protected]
when you encounter a performance issue, what do you do?
[email protected]
stack overflow google angular documents source code
[email protected]
how can we avoid angular performance issues?
[email protected]
read the source code.https://github.com/angular/angular.js
[email protected]
rewrite the source code!http://teropa.info/build-your-own-angular/
[email protected]
optimise compilation
[email protected]
what’s compile mean in angular?
[email protected]
The compilation is a process of walking the DOM tree and matching
DOM elements to directives.
[email protected]
TIP# 1 set the debugInfoEnabled to false
with $compileProvider
[email protected]
why? AngularJS attaches information about scopes to DOM nodes, and adds CSS
classes to data-bound elements.
[email protected]
how? production.module.js : 13
[email protected]
TIP# 2 split your code between compile
and link in custom directives
[email protected]
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
[email protected]
how? heavy-lifting.directive.js
[email protected]
TIP# 3 prefer using ng-if/switch directive
instead of ng-show/hide
[email protected]
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.
[email protected]
how? compile.tmpl.html
[email protected]
optimise the digest cycle
[email protected]
[email protected]
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
[email protected]
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
[email protected]
TIP# 5 prefer DOM manipulation in custom directives when not related to model
[email protected]
why? the built-in DOM manipulation
directives adds watchers to the scope
how? digest.tmpl.html : 44
[email protected]
TIP# 6 reduce the number of watchers with oneTimeBinding feature
[email protected]
why? angular invoke all the watchers that registered on the scope on
each digest
how? digest.tmpl.html : 75
[email protected]
optimise ng-repeat
[email protected]
TIP# 7 always use ‘track by’ in ngRepeat
to maximise performance
[email protected]
why? ng-repeat destroy an recreate DOM
nodes when the data is refreshing
how? repeater.tmpl.html : 20
[email protected]
TIP# 8 use ng-hide when filtering the
repeated items
[email protected]
why? ng-repeat removes DOM nodes from
your HTML and recreate them on filtering
how? repeater.tmpl.html : 82
[email protected]
TIP# 9 use ng-if to link DOM elements on demand
[email protected]
why? ng-if removes nodes from the
DOM so the list will render faster
how? repeater.tmpl.html : 54
[email protected]
going to production
[email protected]
TIP# 10 decorate AngularJS
$exceptionHandler with your own logic
[email protected]
why? uncaught exceptions in angular
expressions is delegated to this service
how? exception-handler.decorator.js
[email protected]
TIP# 11 always use $log service for
you debug logs
[email protected]
why? you can switch the $log
service debug method off on production
how? production.module.js : 12
[email protected]
TIP# 12 bootstrap in strictDi mode
[email protected]
why? even if you use automated tools to guarantee implicit strict-di mode will backup you by throwing exceptions
how? main.module.js : 25
[email protected]
TIP# 13 cache your templates
[email protected]
why? angular loads templates
dynamically using http when they requested for the first time
how? gulpfile.js
[email protected]
grab the code
https://github.com/nirkaufman/angularjs-performance-tips
http://tinyurl.com/pwodl8b
