如何在 AngularJS 中获取组件（div）渲染时间答案

【问题标题】：How to get component (div) rendering time in AngularJS如何在 AngularJS 中获取组件（div）渲染时间
【发布时间】：2017-03-29 07:18:11
【问题描述】：

如何计算每个组件（Divs）的渲染时间，并以图表的形式展示给用户。例如：计算 UI-Grid 加载和渲染 JSON 等的时间。

我试过 https://www.npmjs.com/package/angular-performance ，它计算加载时间，但在 DOM 渲染项目之前。

AngularJS中如何计算组件（div）的渲染时间？

请帮忙。

【问题讨论】：

标签： javascript angularjs performance rendering performance-testing

【解决方案1】：

经过反复试验，我找到了计算每个组件（Divs）的渲染时间的方法

HTML：

 <div ng-controller="Controller1">
    <div custom-performance="log1" content="Content1">{{log1}}</div>
</div>
 <div ng-controller="Controller2">
    <div custom-performance="log2" content="Content2">{{log2}}</div>
</div>

角度：

'use strict';

var app = angular.module('myApp', []);

app.controller('Controller1', ['$scope', '$http', function($scope, $http) {
  $http({
    method: 'POST',
    url: 'JSON/catlog.json'
  }).success(function(response) {
    $scope.log1 = response;
  }).error(function(error) {

  });
}]);

app.controller('Controller2', ['$scope', function($scope) {
  $scope.log2 = "Hello World";
}]);

app.directive('customPerformance', ['$rootScope', function($rootScope) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $rootScope.graphOutput = [];
      var start = new Date();
      var endTime = null;
      scope.$watch(attrs.customPerformance, function(newval) {
        if (newval != undefined) {
          setTimeout(function() {
            endTime = (new Date() - start);
            $rootScope.graphOutput.push({
              'content': attrs.content,
              'timeTaken': endTime
            });
            console.log(JSON.stringify($rootScope.graphOutput));
          });
        }
      });
    }
  }
}]);

【讨论】：