This document summarizes AngularJS performance features discussed by Todd Motto, a Google Developer Expert and lead engineer at Mozio. The summary includes:
1. Angular 1.2 to 1.3 brought major performance improvements like IE8 support being dropped, DOM manipulation being 4.3 times faster, and the $digest loop being 3.5 times faster.
2. New features in 1.3 like one-time bindings, ngModelOptions, and bindToController help optimize performance.
3. Todd Motto discusses techniques for improving Angular performance like minimizing $watches, using $applyAsync with $http, disabling debug info, and avoiding expensive DOM filters.
4. The
11. onetimebindings
» Defined with ::
» $watched until not "undefined"
» $$watcher is unbound
» Will not update upon Model changes
» One-time, not one-way
» Great for single static rendering
13. ng-Model-Options
<!--
debounce:
- example will debounce 250ms when typing
- example will update model immediately on "blur"
-->
<input
type="text"
ng-model="vm.model"
ng-model-options="{
updateOn: 'default blur',
debounce: {
'default': 250,
'blur': 0
}
}">
15. ng-Model-Options
» Fine tune how Model updates are done
» Define event types
» Add debounce to delay Model synchronisation
» e.g. { debounce: 250 } = $digest ~250ms
» $rollbackViewValue for undoing model changes
19. bindToController
// directive controller
function FooDirCtrl() {
this.bar = {};
this.doSomething = function doSomething(arg) {
this.bar.foobar = arg;
// reference the isolate property
this.name = arg.prop;
}.bind(this);
}
20. bindToController
» Used with "controllerAs" (class-like)
» Binds isolate props to the Controller instance
» No $scope
» $scope remains "special use only"
» Not used for data
» Used for $watch/$on/etc
21. ngModel.$validators
// old school
function visaValidator() {
var VISA_REGEXP = /^4[0-9]{12}(?:[0-9]{3})?$/;
function link($scope, element, attrs, ngModel) {
ngModel.$parsers.unshift(function (value) {
var valid = VISA_REGEXP.test(value);
ngModel.$setValidity('visaValidator', valid);
return valid ? value : undefined;
});
}
return { require : 'ngModel', link : link };
}
angular.module('app').directive('visaValidator', visaValidator);
22. ngModel.$validators
// new school
function visaValidator() {
var VISA_REGEXP = /^4[0-9]{12}(?:[0-9]{3})?$/;
function link($scope, element, attrs, ngModel) {
ngModel.$validators.visaValidator = function (value) {
return VISA_REGEXP.test(value); // Boolean
};
}
return { require : 'ngModel', link : link };
}
angular.module('app').directive('visaValidator', visaValidator);
25. ngMessage/ngMessages
<form name="myForm">
<label>
Enter email:
<input type="text" ng-model="field" name="myField"
required ng-minlength="5" ng-maxlength="100">
</label>
<div ng-messages="myForm.myField.$error" role="alert">
<div ng-message="required">
You did not enter a field
</div>
<div ng-message="minlength, maxlength">
Your email must be between 5 and 100 characters long
</div>
</div>
</form>
30. strictDI
» Runs the application's $injector in strict mode
» Throws an error on Services using implicit
annotations
» Use ng-annotate to automate this process
32. $applyAsyncwith$http
» Enables $applyAsync to be used with $http
» Schedules an async $apply for batched requests
» For requests that resolve within ~10ms
» Pushes into $$asyncQueue
» Single $digest
35. Disabledebuginfo
» Disable in production for performance boosts
» Removes $scope references on elements
» Doesn't add classes to DOM nodes with binding info
» Enable in console with
angular.reloadWithDebugInfo();
48. $digest: $digestloop
» Triggered by $scope.$apply / built-in events
» Iterates $$watchers Array on $scope
» If model value is different from last calculated
then corresponding listener executes
» Exits loop, Angular loops again (10 max)
» Repaints DOM (View expressions updated)
49. $digest: $$watchers
» View events/bindings {{ foo }}
» Angular adds a watch to the $watch list
» Only $watched if bound in the View
» Dirty checked in the $digest loop
» Minimise use of $$watchers / avoid if possible
56. ng-if/switchvsng-show/hide
» ng-if/switch reconstruct the DOM
» ng-if/switch for less frequent/heavier rendering
» ng-show/hide toggle "ng-hide" class
» ng-show/hide for more frequent/lighter rendering
» ng-show/hide less performant due to $$watchers
(when hidden)
58. ng-bindover{{handlebars}}
» No DOM flicker (invisible bindings) with ng-bind
» Significantly faster
» ng-perf.com/2014/10/30/tip-4-ng-bind-is-faster-
than-expression-bind-and-one-time-bind
» Lesser need for ng-cloak
» Angular won't evaluate entire text content
59. $applyor$digest?
// forces a $rootScope.$digest();
$scope.$apply();
// forces a [current $scope].$digest();
$scope.$digest();
60. $applyor$digest?
» $scope certainties
» Prevent a full $rootScope.$digest() if you're
certain only child $scopes need updating
» Improve performance by not forcing a full
$rootScope.$digest
» $scope.$digest runs on current and child $scopes
» $scope.$apply triggers $rootScope.$digest call
61. $destroyunbinding
function myFunction () {
// handle element clicks
}
// bind
element.on('click', myFunction);
// unbind
$scope.$on('$destroy', function () {
element.off('click', myFunction);
});
62. $destroyunbinding
» Remove event listeners that may cause memory leaks
» DOM nodes that are destroyed
» Manually unbind by listening to $destroy
» $scope.$on events are automatically removed
63. Deep$watchvs$watchCollection
var prop = [{...},{...},{...},{...}];
$scope.$watch('prop',
function (newValue, oldValue) {
}, true);
$scope.$watchCollection('prop',
function (newValue, oldValue) {
});
64. Deep$watchvs$watchCollection
» Deep $watch uses deep Object tree comparison
(expensive)
» $watchCollection goes only one level deep
» Shallow reference of all top level items
» Try not to use either unless you have to
» Not as testable
» Signs of bad architecture
» Litter Controllers
66. avoidingDOMfilters
function SomeCtrl($filter) {
// date passed in elsewhere
var time = 1444175093303;
// Parsed in JS before bound to the DOM
this.parsedDate = $filter('date')(time, 'dd-MM-yyyy');
}
angular
.module('app')
.controller('SomeCtrl', SomeCtrl);
69. Takeaways
» Understand the $digest loop
» Investigate the performance side of each
Directive/API you use
» Consider using JavaScript over DOM bindings where
possible ($filter etc.)
» Check Angular's GitHub repo for changelogs/
releases