从javascript监视web应用程序的UI延迟

如何从Javascript最好地监控我的webapp的UI延迟？具体地说，我正在寻找可以内置到应用程序本身中的监控，以便在internet上的计算机上运行的应用程序实例能够报告其UI的潜在性

---

在中，他们讨论了跟踪内存泄漏的问题，并在19:15显示了一个比较内存消耗和UI延迟的图表。在演讲结束时，他们没有真正了解如何测量延迟和时间不足，就像一位听众问这个问题一样。但这让我想到一定有办法

简单来说，您可以测量UI函数的总时间，然后除以调用数：-）

可靠的UI定时：

但是，说真的，这并不总是很有效。原因是某些操作是从JavaScript的POV同步的，但实际上在实践中并不同步更新DOM

我发现测量真正的ish UI更新时间的最好方法是开始测量--

（new Date（））.getTime（）

--在UI更新函数的开头，然后在它的结尾调用

window.requestAnimationFrame（function（）{/*在这里获取经过的时间！*/}）

是相当新的，所以旧的浏览器并不真正支持它

即使您的更新代码什么都不做，也会有一些内在的时间流逝，但是您可以通过在页面启动代码中使用上述方法的紧密循环来衡量这一点

中继回服务器：

我将异步地将计时结果添加到队列中。然后，当主代码没有做很多工作（和/或定期）时，通过AJAX将结果作为数组发送回服务器。（包括您的“空”基准）。然后您可以在服务器端处理结果