如何通过 Javascript 最好地监控我的 web 应用程序的 UI 延迟？具体来说，我正在寻找可以内置到应用程序本身中的监控，以便在 Internet 上的计算机上运行的应用程序实例能够报告其 UI 的潜在程度。
在this Google I/O talk 中，他们讨论了跟踪内存泄漏，并在 19:15 显示了一个比较内存消耗与 UI 延迟的图表。就像听众提出这个问题一样，他们并没有真正了解他们如何测量延迟并在演讲结束时耗尽时间。但这让我觉得一定有办法！
【问题讨论】：
标签： javascript performance monitoring
简单来说，您测量 UI 函数的总时间，然后除以调用次数 :-)
可靠的 UI 计时：
但是，说真的，这并不总是很好。原因是某些操作是从 JavaScript 的 POV 同步的，但实际上并没有同步更新 DOM。
我发现衡量真实 UI 更新时间的最佳方法是在我的 UI 更新函数开始时开始测量 --(new Date()).getTime()，然后在结束时调用 @ 987654323@;
window.requestAnimationFrame 相当新，所以旧的浏览器并不真正支持它。
即使您的更新代码什么也不做，也会有一些内在的时间过去，但您可以通过在页面启动代码中使用上述方法的紧密循环来衡量这一点。
中继回服务器：
我会将计时结果异步添加到队列中。然后，当您的主要代码没有做太多（和/或定期）时，通过 AJAX 作为数组将结果发送回您的服务器。 （包括您的“空”基准基准）。然后您可以在服务器端处理结果。
【讨论】：