测量 Angular 渲染指令所花费的时间

Posted 2023-03-07

【中文标题】测量 Angular 渲染指令所花费的时间

【英文标题】：Measure time taken by Angular to render a directive

【发布时间】：2016-05-22 14:05:48

【问题描述】：

有没有一种方法可以？

或者更简单的是，有没有一种方法可以告诉我 Angular 花了多长时间来检测数据集的变化并呈现新数据集的内容？

例如，假设我有这个：

<div ng-repeat="item in items">
     item.text  
</div>

我如何知道items 中的每个数据集更改与最后一次与 DOM 相关的操作之间需要多长时间？

【参考方案1】：

你见过Angular Batarang吗？它有许多 AngularJS 应用程序的性能测试工具。例如。它可以显示最近的摘要周期的时间以及最昂贵的观察者。

注意：我已使用您的代码和简单按钮在 this pen 上进行了测试。

<div ng-repeat="item in items">
     item.text  
</div>

【讨论】：

我在扩展程序中没有看到任何内容（启用它并重新启动 Chrome 之后）。这适用于 Linux/Chrome 48 吗？

无论如何，这并没有真正显示渲染性能/时间。这只是观察者部分。如果我错了，请纠正我。

它测量 Angular 的最后一个摘要周期的总时间。观察者是其中最重的部分。 Ot 应该可以在任何 Chrome 中工作 - 在您的开发人员工具中应该有一个 AngularJS 选项卡。您需要选中 Performance 附近的复选框以开始分析。