如何在Angular中测试渲染速度

一尘不染

如何在Angular中测试渲染速度

angularjs

我们正在构建一个Angular应用程序，并且试图弄清楚如何获得渲染各种页面所需时间的一些基准。我在performance.timing这里已读过有关内容，但这似乎仅对非单页应用程序有用，因为当我导航至应用程序中的新视图时，计时编号不会改变。

理想情况下，我们将能够插入一些代码来获取各种视图的渲染时间并将其发布到我们的Big Query服务中。

关于如何在Angular应用中获取视图的时间信息的任何想法？

编辑：

更具体地说，您转到一条加载大ng-
repeat列表的路由（这对性能而言不是最佳选择），并且该窗口在实际呈现列表中的项目之前有很长的延迟。我们想看看从大的空白视图到呈现列表中的项目需要多长时间。

阅读 481

2020-07-04

共1个答案

一尘不染

在进行了一些实验之后，我找到了一种近似估算视图渲染所需时间的方法。

场景：

路由到Angular应用中的页面
拨打AJAX以获得冗长的物品清单
取得项目清单，传递给 ng-repeat ul
查看渲染列表

在Angular应用程序中，它ng-repeat是一个臭名昭著的性能杀手，但它非常方便。这里是关于性能的讨论，这里。

假设我们希望获得从＃3到＃4的时间的近似值，因为测试AJAX调用性能非常简单。

这里是一些上下文：

<ul>
  <li ng-repeat="item in items">
    {{item.name}}
    <!-- More content here -->
  </li>
</ul>

在Angular控制器中：

// Get items to populate ng-repeater
MyApiService.getItems(query)
  .then( function (data) {
    $scope.items = data;
    // When callback finishes, Angular will process items
    // and prepare to load into DOM
  }, function (reason) {
    console.log(reason);
  });

通过@runTarm，提到的事件$routeChangeStart，$routeChangeSuccess以及$viewContentLoaded火灾一旦路径被加载，但在此之前的DOM渲染的项目，所以他们不解决问题。但是，通过实验，我发现AJAX回调一旦完成并设置$scope.items，Angular就开始进行阻塞操作，以处理items并准备将ng- repeat
ul其插入DOM中。因此，如果您获得了AJAX调用完成之后的时间，并再次在setTimeout回调函数中指定的时间获得时间，setTimeout回调将排队等待直到Angular完成转发器过程，并在DOM渲染之前获得一秒钟的时间，从而为您提供了最接近的渲染时间。这不是实际的渲染时间，但是对我们来说，最慢的部分不是DOM在起作用，而是Angular，这就是我们要测量的东西。

这是修改后的示例：

// Get items to populate ng-repeater
MyApiService.getItems(query)
  .then( function (data) {
    var start = new Date();
    $scope.items = data;
    // When callback finishes, Angular will process items
    // and prepare to load into DOM
    setTimeout( function () {
      // Logs when Angular is done processing repeater
      console.log('Process time: ' + (new Date() - start));
    }); // Leave timeout empty to fire on next tick
  }, function (reason) {
    console.log(reason);
  });

2020-07-04