CODEWITHSUNDEEP
javascriptangularjs
Clay Banks
Clay Banks

Reputation: 4591

Capturing Time it Takes to Update the View in Angularjs

I'm trying to time in seconds how long it takes from when a user navigates to a page, to the time results are displayed on that page via an $http request

EDIT: I'm displaying this time to the user, similar to how Google displays theirs after a search

My code looks like this:

ui-view

<div>
  <h2>Awesome Surfers Directory</h2>  

  <!-- Display time it took to fetch and display all servers -->
  <small>Results returned in {{ executionTime }} seconds</small>

  <!-- Surfer List -->
  <ul>
    <li ng-repeat="surfer in surfers">
        {{ surfer.firstName + ' ' + surfer.lastName }}
    </li>
  </ul>
</div>

js

.state({
  name: 'surfers',
  url: '/getSurfers',
  templateUrl: 'resources/components/surfers.html',
  controller: function($scope, $http){
    // Lets keep track of how long the fetch takes with a timer
    var t0 = performance.now(); 
    $http.get('fetchAllSurfers')
      .then(function(response){
        // Bind the results to scope - This could be several hundred results
        $scope.surfers = response.data;
      })
      .catch(function(error){
        // Oh no!
        console.warn('Woah dude, something like went totally wrong and stuff')
      })
      .finally(function(){
        // End the timer & bind to scope
        var t1 = performance.now();
        $scope.executionTime = (((t1 - t0) % 60000) / 1000).toFixed(1);
      })

    }
  });

The timer ends as soon as the request is complete, but well before the Surfers are actually displayed on the View/UI (which I assume is because Angular will take some time to update the DOM). I'd just like to know how to accurately capture this in my timer?

Any tips or help is appreciated!

Upvotes: 1

Views: 25

Answers (1)

Maxim Shoustin
Maxim Shoustin

Reputation: 77910

The timer ends as soon as the request is complete, but well before the Surfers are actually displayed on the View/UI (which I assume is because Angular will take some time to update the DOM). I'd just like to know how to accurately capture this in my timer?

Right, digest cycle takes some time to dispatch and render your stuff.

I would try to use ngView -> $viewContentLoaded event:

Emitted every time the ngView content is reloaded.

 $scope.$on('$viewContentLoaded', function(){
   //view content is loaded
  });

You have several Chrome extensions Angular watchers. It will help you to understand if you got proper measurements:

Upvotes: 1

Related Questions