AngularJS:确定指令渲染所需的时间

Question

如何衡量指令(元素)渲染的程度？如果没有,是否可以确定哪个指令花费最多的时间进行渲染？

PS.是的,我已经使用过,Batarang但它只显示了占用时间最多的手表表达式.是的,我用Google搜索并发现了一个非常相似的问题,但那里仍然没有答案.

Answer 1

我创建了指令来检查角度视图的渲染时间.指令使用简单但有用的调速器库 - https://github.com/maciejsikora/Speeder.它从ms-start渲染到ms-stop渲染计算微秒.

<span ms-perf ms-start='symbol'></span>

...here some actions ng-ifs, repeats etc.

<span ms-perf ms-stop='symbol'></span>

使用指令和ng-repeats的完整示例:https: //jsfiddle.net/maciejsikora/4ud2rLgz/

示例指令在控制器中使用,但也可以在另一个指令中使用.这个解决方案的缺点是我们需要将指令附加到DOM,并在发现问题之后将其从那里删除.当然,好主意是创建提供者并将其配置用于开发和生产环境,因此在生产中不应运行结果和计时.

Answer 2

为什么不使用Chrome的时间轴检查器？

您可以在渲染之前开始记录时间轴,然后在状态更改后结束它.

单独渲染指令的时间线将是紫色的时间,紫色和绘画楔的总和将为您提供从XHR提取完成到模板绘制到屏幕上的总时间.有没有理由说这不准确？