What is a simple way to measure the duration of the angularjs digest cycle? There exist various methods to analyze the performance of the digest cycle, however each comes with its own pitfals:
... there must be a better way ?!1?
Digest cycle is what Angular JS triggers when a value in the model or view is changed. The cycle sets off the watchers which then match the value of model and view to the newest value. Digest cycle automatically runs when the code encounters a directive.
The first step in improving the performance of your Angular app is to measure how long it takes to load and bootstrap inside the browser. Why? Some developers know that they need to optimize their Angular app but they have no idea how much or where exactly to start.
But, no Angular application is immune to runtime performance. Runtime performance is usually caused by not properly unsubscribing from a RxJS observable, binding thousands of elements to a list without using a trackbyFn and overloading the change detection cycle.
As soon as it launches in your browser, open the console in Developer Tools and type the following command to measure how long the last change detection cycle lasted. For a very basic Angular application you can expect a change detection cycle of 0.01 - 0.05 milliseconds.
Right Approach to performance test AngularJS or ReactJS applications. In AngularJS or ReactJS applications, Web HTTP/HTML gives you the performance of web services and TruClient gives you the end-to-end performance for single Vuser. To validate the performance, you need to blend two protocol approach. Create a TruClient script with 1 Vuser ...
Here's a secret. In the chrome dev tools, do a cpu profile run. After you have stopped capturing, at the bottom of the screen is a down triangle next to "Heavy (Bottom Up)". Click the triangle and select "Flame Chart". Once you are in Flame Chart mode, you can zoom and pan to see the digest cycles, how long they take, and exactly what functions are being called. The Flame Chart is so incredibly useful for tracking down page load issues, ng-repeat performance problems, digest cycle problems! I really don't know how I was able to debug and profile before the Flame Chart. Here is an example:
The following answer will tell you the idle performance of the $digest loop, ie., the performance of digest when none of your watch expressions change. This is helpful if your application seems sluggish even when the view isn't changing. For more complex situations, see aet's answer.
Type the following into the console:
angular.element(document).injector().invoke(function($rootScope) {
var a = performance.now();
$rootScope.$apply();
console.log(performance.now()-a);
})
The result will give you the duration of the digest cycle, in milliseconds. The smaller the number, the better.
NOTE:
Domi noted in the comments:
angular.element(document)
will not yield much if you used theng-app
directive for initialization. In that case, get theng-app
element instead. E.g. by doingangular.element('#ng-app')
You can also try:
angular.element(document.querySelector('[ng-app]')).injector().invoke(function($rootScope) {
var a = performance.now();
$rootScope.$apply();
console.log(performance.now()-a);
})
Here is a new tool I found that helps out in digest profiling: Digest-HUD
You could also use angular-performance
This extension provides realtime monitoring charts of the number of watchers, digest timing and digest rate. You also get the digest timing distribution so that you can make out exceptionally long digest timing from more recursive paterns and all realtime data are linked to events so that you can determine which actions changed the application performances. Finally, you can time services method and count their execution to determine the ones that have the more impact on the running time of your app.
Disclamer: I am the author of the extension
One handy tool for keeping an eye on the digest cycle can be found via the excellent ng-stats tool by @kentcdodds. It creates a little visual element like so, and can even be implemented via bookmarklet. It can even be used inside of iFrames like jsfiddle.
Little utility to show stats about your page's angular digest/watches. This library currently has a simple script to produce a chart (see below). It also creates a module called
angularStats
which has a directive calledangular-stats
which can be used to put angular stats on a specific place on the page that you specify.
Found at https://github.com/kentcdodds/ng-stats
You can use UX Profiler
for strict mode, one running of digest cucle, run it in f12 console in chrome
angular.element(document).injector().invoke(['$rootScope',function($rootScope) { var a = performance.now(); $rootScope.$apply(); return performance.now()-a; }])
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With