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

Question

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

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

Answer 1

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

可靠的 UI 计时:

但是，严肃地说，这并不总是能很好地发挥作用。原因是某些操作从 JavaScript 的 POV 来看是同步的，但实际上并没有同步更新 DOM。

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

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

即使您的更新代码不执行任何操作，也会消耗一些固有时间，但您可以通过在页面启动代码中使用上述方法的紧密循环来测量此时间。

中继回服务器:

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