Timing how long it takes to render something in angular

Question

I'm currently using a third party directive, and I want to time how long it takes to render something on screen.

  console.time('time');
  tableservice.setColumns(columns);
  var dataView = new DataView();
  dataView.setItems(datarows);
  $scope.columns = tableservice.getColumns();
  $scope.dataView = dataView;
  console.timeEnd('time');

This is the code I have for generating for supplying the model, so that it can be displayed onto the view.

I wanted to time how long it would take, and saw that the console.time methods vary way too much, and the times are awful.

Sometimes I get 0.000ms and 1.000ms, which isn't fine grained at all.

What would be the best way for me to test to see how long it takes for something to be rendered on the view?

Edit:

I've tried a lot of timing methods, and they all seem to jump around way too much so I'm assuming that the times are not very accurate.

Is there a better way to test how long it takes for a model to render onto the screen?

You could have a look to [Batarang](https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en) too :) — Preview, Sep 24 '14 at 22:24
Rendering happens after you leave the "Angular execution context", see https://docs.angularjs.org/guide/scope#integration-with-the-browser-event-loop So above, I think you're only measuring the execution of the JavaScript code, not the rendering. — Mark Rajcok, Sep 25 '14 at 00:26
I don't know which timing methods you tried, but did you try [User timing API](http://www.w3.org/TR/user-timing/) (using `mark(...)` and `measure(...)`? [It's not fully supported yet](http://caniuse.com/#feat=user-timing), but I would give it a try... — Maxime Morin, Sep 25 '14 at 00:34

score 0 · Answer 1 · edited May 23 '17 at 12:05

If you want something more accurate than that, you can use new Date().getTime() to get time in microseconds.

Also, performance.now() seems to be applicable here and it's also much more accurate. See a nice answer about it here: https://stackoverflow.com/a/21120901/965907

So:

  var startTime = new Date().getTime();
  tableservice.setColumns(columns);
  var dataView = new DataView();
  dataView.setItems(datarows);
  $scope.columns = tableservice.getColumns();
  $scope.dataView = dataView;
  console.log(new Date().getTime() - startTime);

Timing how long it takes to render something in angular

1 Answers1