javascript - 从 javascript 监控 Web 应用程序的 UI 延迟

Question

我怎样才能最好地从 Javascript 监控我的 web 应用程序的 UI 延迟？具体来说，我正在寻找可以内置到应用程序本身中的监控，以便在互联网上的计算机上运行的应用程序实例将报告其 UI 的潜在程度。

在这个 Google I/O talk中，他们讨论了跟踪内存泄漏，并在 19:15 展示了一个比较内存消耗与 UI 延迟的图表。就像听众提出这个问题一样，他们并没有真正了解他们如何测量延迟并在演讲结束时耗尽时间。但这让我觉得一定有办法！

Answer 1

简单来说，您测量 UI 函数的总时间，然后除以调用次数 :-)

可靠的 UI 时序：

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

我发现测量真实 UI 更新时间的最佳方法是开始测量 - (new Date()).getTime()- 在我的 UI 更新函数开始时，然后在它结束时调用window.requestAnimationFrame(function(){ /* get elapsed time here! */ });

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

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

转发回服务器：

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