如何测量 JavaScript 中交互和 mousedown 事件之间的延迟？答案

【问题标题】：How to measure latency between interaction and mousedown event in JavaScript?如何测量 JavaScript 中交互和 mousedown 事件之间的延迟？
【发布时间】：2015-04-25 04:00:33
【问题描述】：

有没有办法测量按下鼠标按钮和定义的 onmousedown 函数触发之间的延迟？

或者，是否有关于此延迟的当前统计信息？

我假设这两个事件不是同时发生的，并且因浏览器而异。

到目前为止，我唯一的方法是创建多个 onmousedown 事件并使用 Date 测量它们之间的时间差。我发现它们之间的差异高达 6 毫秒。

我正在开发对时间敏感（以毫秒计）的音频应用程序。

任何帮助都很好，谢谢！

【问题讨论】：

我对桌面浏览器特别感兴趣；我知道移动事件有 300 毫秒的延迟，但这不是我想要衡量的。
对时间敏感的函数使用 JavaScript 可能不是您的最佳选择。我建议为此类应用探索其他具有更好定义规范的工具。
“对时间敏感的函数使用 JavaScript 可能不是您的最佳选择。” - 还要记住 JavaScript 是单线程的。
谢谢，是的，我知道 JS 通常不是时间敏感型应用程序的好选择。但是，在使用 Web Audio API 时，尽可能准确地获取时间（根据具体情况）很重要。
@JánosWeisz：单线程对延迟的意义不大。您仍然可以使用某些优化来保持您的应用具有响应性（例如，在 webworkers 中执行非常繁重的工作）

标签： javascript timing latency onmousedown

【解决方案1】：

您可能正在寻找Event.timeStamp 和当前时间戳Date.now() 之间的区别。它们都返回自纪元以来经过的时间（以毫秒为单位）：

JavaScript

document.getElementById("mydiv").addEventListener('click', function (e) {
    // in milliseconds
    var latency = Date.now() - e.timeStamp;
});

Working example on JSFiddle.

通过从后者中减去前者 - 正如您在包含的 sn-p 中看到的那样 - 您可以测量延迟。

不幸的是，事件timeStamp 并不是鼠标点击的实际硬件时刻，而是浏览器收到来自您的操作系统的点击事件时。然而，这总是发生在事件处理程序被调用之前，并且应该有可以忽略不计的延迟。

关于链接的小提琴，我的时间差异大部分时间都在 1ms 以下；我偶尔会通过无情的按钮粉碎和页面重新加载来实现 10 毫秒以上的值，但这并不常见。当然，如果您在事件处理程序中执行更多计算密集型任务，则差异很容易扩大，在这种情况下，延迟补偿很快就会成为必不可少的部分。

【讨论】：