测量Angular渲染指令所用的时间

Question

有没有办法可以衡量Angular渲染指令所花费的时间？

或者甚至更简单，有没有办法告诉Angular检测数据集中的更改并渲染新数据集的内容需要多长时间？

例如，假设我有这个：

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

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

Answer 1

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

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

input[type="text"], input[type="password"], input[type="email"]
{
    outline: none;
    padding: 10px;
    display: block;
    width: 300px;
    border-radius: 3px;
    border: 1px solid #eee;
    margin: 20px auto;
    text-align: center;
}

input[type="submit"]
{
    outline: none;
    padding: 10px;
    display: block;
    width: 300px;
    margin: auto;
    color: #eee;
    background: #0098cb;
    border: 0px;
    border-radius: 3px;
}

input[type="submit"]:hover
{   
    outline: none;
    padding: 10px;
    display: block;
    width: 300px;
    margin: 20px auto;
    color: #eee;
    background: #00b8cb;
    border: 0px;
    border-radius: 3px;
    cursor: pointer;
}