AngularJS: Determining how much time the directive takes to render

Question

How can I measure how much a directive (element) takes to render? If not, is it possible to determine what directive take the most time to be rendered?

PS. Yes, I've used Batarang but it only showed watch-expressions that take the most time. An yes, I've googled and found a question that is much alike, still there's no answer there.

Answer 1

I created directive to check rendering times of angular view. Directive uses simple but useful speeder lib - https://github.com/maciejsikora/Speeder. It count microseconds from ms-start renders to ms-stop renders.

<span ms-perf ms-start='symbol'></span>

...here some actions ng-ifs, repeats etc.

<span ms-perf ms-stop='symbol'></span>

Full example of using directive with ng-repeats: https://jsfiddle.net/maciejsikora/4ud2rLgz/

In example directive is used in controller, but it can be used also in another directive. Minuses of this solution is that we need to append directive to DOM and after finding problem it should be removed from there. Of course good idea would be to create provider and configurate it for development and production enviroment, so in production no results and time counting should run.

Answer 2

Why not just use Chrome's Timeline inspector?

You could start recording the timeline before render, and then end it after the state change.

The timeline for rendering the directive alone would be the time in Purple, and the sum of Purple and Painting wedges would give you the total time from the time that the XHR fetch was completed, till the template is painted onto the screen. Is there a reason why this wouldn't be accurate?