从单击按钮到网站收到数据的确切时间距离

Question

我正在创建一个 chrome 扩展。 我需要知道当用户单击特定按钮时需要多少毫秒才能将命令接收到网站服务器。 我也有一个连接到该网站的 web Worker。 我能否获得网站服务器收到数据时单击按钮的确切时间？ 回复我需要多少毫秒并不重要，点击后接收到服务器请求的时间现在是 mu 问题。 有谁可以帮助我吗？

我正在寻找 javascript 代码来获取单击按钮和网站服务器接收按钮之间的时间距离。

Answer 1

通过找到该按钮并在其上附加一个调用performance.now()的事件处理程序，很容易获得单击按钮的时间

const t0 = 0;
document.getElementById('buttonId').addEventListener('click',() => {
  t0 = performance.now();
});

检测何时收到服务器响应并非易事。 您可能需要使用chrome.webRequest api。

或者，一种更简单的方法是查找请求的副作用，这些副作用发生在 DOM 中。 （加载程序出现和消失，数据行出现，按钮被禁用和重新启用等）。

您可以轮询这些更改，或使用mutationObserver api 来检测包含预期属性的元素何时在 DOM 中可用。

假设您每 10 毫秒轮询一次重新启用的按钮：

const t1 = 0;
const interval = window.setInterval(() => {
  if (!document.getElementById('buttonId').getAttribute('disabled')) {
    t1 = performance.now();
    requestTime = t1 - t0;
    console.log(requestTime);
    window.clearInterval(interval);
  }
},10);