CODEWITHSUNDEEP
javascriptangularjs
Sylvain
Sylvain

Reputation: 19269

How to measure the time to bind/render a view or directive?

I have a view that contains two directives. I want to know how much time it takes to update/bind/display each part (the view, the first directive and the other directive).

I'm looking for an end-to-end duration, including the time spent in JS and the actual browser rendering time;

I know Batarang helps measuring watches but here I'm looking at the bigger picture.

In Chrome, I started a CPU Profile and hit refresh. In the Flame Chart view, I see that scope.$digest took 91 ms. But that's for the whole view including the directives right? And does that include browser rendering time?

I don't mind inserting a few console.log here and there in the AngularJS source code to do that.

Upvotes: 2

Views: 940

Answers (2)

leon.io
leon.io

Reputation: 2824

I'll probably lose reputation for saying this :) lets hope not - but the latest IE11 dev tools have both a profiler for scripts, and UI responsiveness tabs for rendering.

It's a little bit odd using IE for internet dev, but the dev tools have been really good - it has taken some adapting to switch from chrome, but it's just as useful and quite performant.

An overview of the profile and how to use it, and track down specific app areas is at http://msdn.microsoft.com/en-us/library/ie/dn255009(v=vs.85).aspx

Upvotes: 5

bbahov
bbahov

Reputation: 109

I don't know if it can help your exact situation but Batarang (the chrome extension for AngularJS) can really help you with AngularJS performance measuring. Like this: https://github.com/angular/angularjs-batarang#performance

You can find it here: https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en

Upvotes: 3

Related Questions