Optimizing Angular Performance in Enterprise Single Page Apps
Download as PPTX, PDF0 likes719 views
This document discusses strategies for optimizing Angular performance, including minimizing watchers, reducing digest cycle time, optimizing load time, and caching templates. It recommends avoiding unnecessary watches, using track by in ng-repeat, keeping controllers small and logic in services, caching requests, and pre-caching templates during build to reduce the number of HTTP requests.
![angular
.module('app')
.factory('friendsService', friendsService);
friendsService.$inject = ['$http', '$filter'];
function friendsService($http, $filter) {
var factory = {
getFriends: getFriends,
getAvailableFriends: getAvailableFriends
};
return factory;
function getFriends() {
return $http.get('/someUrl', config)
Injecting $filter](https://image.slidesharecdn.com/optimizingangularperformance-160610142949/85/Optimizing-Angular-Performance-in-Enterprise-Single-Page-Apps-31-320.jpg)
![angular.module('docsIsolateScopeDirective', []).directive('myCustomer',
function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
templateUrl: 'my-customer-iso.html'
};
});](https://image.slidesharecdn.com/optimizingangularperformance-160610142949/85/Optimizing-Angular-Performance-in-Enterprise-Single-Page-Apps-38-320.jpg)
![angular.module('docsIsolateScopeDirective', []).directive('myCustomer',
function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
templateUrl: 'my-customer-iso.html'
};
});
Each directive
templateUrl results
in another request](https://image.slidesharecdn.com/optimizingangularperformance-160610142949/85/Optimizing-Angular-Performance-in-Enterprise-Single-Page-Apps-39-320.jpg)
![ui.router
angular.module('abcApp', ['ui.router']).config(function ($stateProvider) {
$stateProvider
.state('user.add', {
url: '/mgt/user/add', templateUrl: 'views/mgt_user/add.html'
})
.state('user.view', {
url: '/mgt/user/view/:userId', templateUrl: 'views/mgt_user/view.html'
})
.state('user.list', {
url: '/mgt/user/list', templateUrl: 'views/mgt_user/list.html'
});
});
and maybe another request](https://image.slidesharecdn.com/optimizingangularperformance-160610142949/85/Optimizing-Angular-Performance-in-Enterprise-Single-Page-Apps-40-320.jpg)
![var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('templateId.html', 'This is the content of the template');
});
$templateCache](https://image.slidesharecdn.com/optimizingangularperformance-160610142949/85/Optimizing-Angular-Performance-in-Enterprise-Single-Page-Apps-45-320.jpg)
![ngHtml2JS
var ngHtml2Js = require('gulp-ng-html2js');
var gulpConcat = require('gulp-concat');
gulp.task('createTemplates', function(cb){
gulp.src(['/app/**/*.html', '/app/**/*.svg'])
.pipe(ngHtml2Js({
base: '/',
moduleName: 'app',
prefix: '/'
}))
.pipe(gulpConcat('templates.'))
.pipe(gulp.dest('./services'))
.on('end', cb);
});](https://image.slidesharecdn.com/optimizingangularperformance-160610142949/85/Optimizing-Angular-Performance-in-Enterprise-Single-Page-Apps-50-320.jpg)
![ngHtml2JS
angular.module("app").run(["$templateCache", function ($templateCache) {
$templateCache.put("template/modal/backdrop.html",
"<div class="modal-backdrop fade"n" +
" ng-class="{in: animate}"n" +
" ng-style="{'z-index': 1040 + (index && 1 || 0) + index*10}"n" +
"></div>n" +
"");
}]);](https://image.slidesharecdn.com/optimizingangularperformance-160610142949/85/Optimizing-Angular-Performance-in-Enterprise-Single-Page-Apps-51-320.jpg)
Optimizing Angular Performance in Enterprise Single Page Apps
- 3. Render Time
- 9. $watch scope.$watch('name', function(newValue, oldValue) { scope.counter = scope.counter + 1; });
- 10. where watches are set $scope.$watch {{ }} type bindings (ng-bind too) Most directives (i.e. ng-show) Scope variables scope: { bar: '='} Filters {{ value | myFilter }} ng-repeat http://www.alexkras.com/11-tips-to-improve-angularjs-performance/
- 11. digest cycle runs 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 http://www.alexkras.com/11-tips-to-improve-angularjs-performance/
- 12. ng-if instead of ng-show <div class="panel" ng-show="panel.isOpen" ng-repeat="panel in panels"> {{panel.name}} <div class="checkbox" ng-repeat="setting in panel.settings"> <label> <input type="checkbox" ng-model="setting.on"/> {{setting.name}} </label> </div> </div>
- 13. ng-if instead of ng-show <div class="panel" ng-show="panel.isOpen" ng-repeat="panel in panels"> {{panel.name}} <div class="checkbox" ng-repeat="setting in panel.settings"> <label> <input type="checkbox" ng-model="setting.on"/> {{setting.name}} </label> </div> </div> With ng-show, the nodes remain in the DOM and are being watched
- 14. ng-if instead of ng-show <div class="panel" ng-if="panel.isOpen" ng-repeat="panel in panels"> {{panel.name}} <div class="checkbox" ng-repeat="setting in panel.settings"> <label> <input type="checkbox" ng-model="setting.on"/> {{setting.name}} </label> </div> </div> With ng-if, only nodes visible will be watched
- 15. Bind once <p> {{ vm.user }} </p>
- 16. Bind once <p> {{ ::vm.user }} </p> Once the value is defined, Angular will render it and unbind it from the watchers
- 17. STRATEGY: Reduce digest cycle time
- 18. track by <div ng-repeat="model in collection | orderBy: 'id' as filtered_result"> {{model.name}} </div>
- 22. track by <div ng-repeat="model in collection | orderBy: 'id' as filtered_result"> {{model.name}} </div> Without track by ng-repeat rebuilds all the DOM nodes, including nodes that require no change
- 23. track by <div ng-repeat="model in collection | orderBy: 'id' as filtered_result track by model.id"> {{model.name}} </div> track by provides an index Angular can use to track model changes
- 24. track by <div ng-repeat="model in collection | orderBy: 'id' as filtered_result track by model.id"> {{model.name}} </div> track by must be last in the expression
- 25. track by <div ng-repeat="model in collection | orderBy: 'id' as filtered_result track by $index"> {{model.name}} </div> track by $index can also provide a performance boost
- 26. piped | filters ng-repeat=”person in listOfFriends | filter:{ available: true}” {{ person.birthday | date }}
- 27. Angular runs every single piped filter twice per $digest cycle
- 28. <div class="list-group"> <div class="list-group-item" ng-repeat="person in listOfFriends | filter:{ available: true}"> <div class="row"> <div class="col-sm-6"> {{person.name}} </div> <div class="col-sm-6"> {{person.birthday | date: 'shortDate' }} </div> </div> </div> </div>
- 29. <div class="list-group"> <div class="list-group-item" ng-repeat="person in listOfFriends | filter:{ available: true}"> <div class="row"> <div class="col-sm-6"> {{person.name}} </div> <div class="col-sm-6"> {{person.birthday | date: 'shortDate' }} </div> </div> </div> </div> Could be done in controller or better yet a service
- 30. Keep your controllers small & leverage services to do the heavy lifting
- 31. angular .module('app') .factory('friendsService', friendsService); friendsService.$inject = ['$http', '$filter']; function friendsService($http, $filter) { var factory = { getFriends: getFriends, getAvailableFriends: getAvailableFriends }; return factory; function getFriends() { return $http.get('/someUrl', config) Injecting $filter
- 32. getFriends: getFriends, getAvailableFriends: getAvailableFriends }; return factory; function getFriends() { return $http.get('/someUrl', config) .then(successCallback); function successCallback(friends) { return friends.map(function(friend) { friend.birthday = $filter('date')(friend.birthday, 'shortDate'); return friend; }); } } Filter it one place… in the service
- 33. function successCallback(friends) { return friends.map(function(friend) { friend.birthday = $filter('date')(friend.birthday, 'shortDate'); return friend; }); } } function getAvailableFriends() { return getFriends.then(function(friends) { return friends.filter(function(friend) { return friend.available; }); }) } } Create additional methods for common ng-repeat | filters
- 34. Load Time
- 35. STRATEGY: Reduce # of requests
- 37. Caching $http.get(url, { cache: true}).success(...);
- 38. angular.module('docsIsolateScopeDirective', []).directive('myCustomer', function() { return { restrict: 'E', scope: { customerInfo: '=info' }, templateUrl: 'my-customer-iso.html' }; });
- 39. angular.module('docsIsolateScopeDirective', []).directive('myCustomer', function() { return { restrict: 'E', scope: { customerInfo: '=info' }, templateUrl: 'my-customer-iso.html' }; }); Each directive templateUrl results in another request
- 40. ui.router angular.module('abcApp', ['ui.router']).config(function ($stateProvider) { $stateProvider .state('user.add', { url: '/mgt/user/add', templateUrl: 'views/mgt_user/add.html' }) .state('user.view', { url: '/mgt/user/view/:userId', templateUrl: 'views/mgt_user/view.html' }) .state('user.list', { url: '/mgt/user/list', templateUrl: 'views/mgt_user/list.html' }); }); and maybe another request
- 41. <div class="slide-animate" ng-include="template.url"></div> which may trigger another request
- 42. Even though template requests are cached after GET, they really start to add up, especially on the initial load of the app
- 44. <script type="text/ng-template" id="templateId.html"> <p>This is the content of the template</p> </script> You could do this... But this is ugly and unmaintainable
- 45. var myApp = angular.module('myApp', []); myApp.run(function($templateCache) { $templateCache.put('templateId.html', 'This is the content of the template'); }); $templateCache
- 47. Sorry gramps But we’re gonna Javascript our HTMLs in the BUILD.
- 48. Standard Angular build process Concat & minify all Javascript files into a single file Combine and minify CSS files into a single file Gzip & cache assets
- 49. Standard Angular build process Concat & minify all Javascript files into a single file Combine and minify CSS files into a single file Gzip & cache assets Store HTML files into $templateCache
- 50. ngHtml2JS var ngHtml2Js = require('gulp-ng-html2js'); var gulpConcat = require('gulp-concat'); gulp.task('createTemplates', function(cb){ gulp.src(['/app/**/*.html', '/app/**/*.svg']) .pipe(ngHtml2Js({ base: '/', moduleName: 'app', prefix: '/' })) .pipe(gulpConcat('templates.')) .pipe(gulp.dest('./services')) .on('end', cb); });
- 51. ngHtml2JS angular.module("app").run(["$templateCache", function ($templateCache) { $templateCache.put("template/modal/backdrop.html", "<div class="modal-backdrop fade"n" + " ng-class="{in: animate}"n" + " ng-style="{'z-index': 1040 + (index && 1 || 0) + index*10}"n" + "></div>n" + ""); }]);