如何衡量绑定/呈现视图或指令的时间?

时间:2014-02-06 19:11:23

标签: javascript angularjs

我有一个包含两个指令的视图。我想知道更新/绑定/显示每个部分需要多长时间(视图,第一个指令和另一个指令)。

我正在寻找一个端到端的持续时间,包括在JS中花费的时间和实际的浏览器渲染时间;

我知道Batarang有助于衡量watches,但我在这里看的是更大的图片。

在Chrome中,我启动了CPU配置文件并点击刷新。在Flame Chart视图中,我看到scope.$digest花了91毫秒。但那是包括指令在内的整个观点吗?这包括浏览器渲染时间吗?

我不介意在AngularJS源代码中插入一些console.log来做到这一点。

2 个答案:

答案 0 :(得分:5)

我可能会因为这样说而失去名声:)希望不要 - 但最新的IE11开发工具既有脚本分析器,也有用于渲染的UI响应标签。

使用IE进行互联网开发有点奇怪,但开发工具非常好 - 它已经采取了一些适应从chrome切换,但它同样有用且性能相当。

概要文件概述及其使用方法以及追踪特定应用领域的时间为http://msdn.microsoft.com/en-us/library/ie/dn255009(v=vs.85).aspx

答案 1 :(得分:3)

我不知道它是否可以帮助您确切的情况,但Batarang(AngularJS的chrome扩展)可以真正帮助您进行AngularJS性能测量。 像这样:https://github.com/angular/angularjs-batarang#performance

您可以在此处找到它:https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en