Javascript Chrome开发工具如何测量交互的响应？

我试图测量用户在Chrome中感知到的交互延迟。这是从按键到屏幕更新的时间。在本例中，我们使用新内容呈现屏幕的大部分。没有网络延迟，我们只是更新HTML

在下面的屏幕截图中，您可以看到Chrome DevTools按键事件，它运行大量javascript，然后有一系列绘画、合成等，然后按键事件“响应”范围结束

假设水平灰线是vsyncs（有人知道这些线是否记录在任何地方吗？），Chrome在其中向GPU和屏幕写入了一个新的渲染，Devtools对keydown事件给出的“响应”范围似乎与我试图测量的很好的近似，当我们完成DOM的变异后，它测量从按下键到第一条灰线之后的时间

我已经尝试了各种方法来用javascript估算这一时间，包括使用requestAnimationFrame、requestIdleCallback、带有消息传递的setImmediate polyfill，以及上述几种方法的组合。看起来它们都比纯Javascript的时间长，但大多数情况下，它们低估或高估了实际更新屏幕的时间

有没有人知道更好的方法来衡量生产中的这段时间？Chrome DevTools度量是如何工作的？我应该完全测量其他东西吗

---

这些输入延迟事件的检测非常复杂和酷。这些都是很好的问题

输入延迟事件结束时间

输入延迟事件在VSYNC周围结束，假设它们触发的工作导致无效，需要屏幕更新。这就是为什么在屏幕截图中，向下键比向上键延伸得更远。（即使存在

keyup

侦听器，它们也不会使样式/布局无效）

当然，这些事件可能在较早的paint&VSYNC中终止，而不是在屏幕更新输入响应时终止。。。但你必须自己打电话

灰色虚线、vsync、交换缓冲区

灰色虚线是帧边界，但这里开始变得棘手。在Chrome（还有AFAIK，其他浏览器）中有主线程框架和合成器线程框架。DevTools试图显示一个单一的帧时间线来保持简单，因此它不可能是完美的。出于您的目的，我将查看

帧

轨迹中屏幕截图的右边缘。右边缘是屏幕用这些内容更新的地方。在Chrome上，我们称这次为

swapBuffers

。（从技术上讲，VSYNC是指显示器显示“我准备好换一个新的帧”，这略有不同）

用JavaScript衡量这一点

不幸的是，你没有完美的工具来实现这一点。旧技术是双rAF，有时会减去一些时间。在这一点上，你肯定知道有一个新的框架。应用其中一些，你可能会相当聪明。但这并不完美。例如，长图像解码将延迟合成器发送帧，但主线程现在处于空闲状态，VSYNC将导致它开始一个全新的帧（从而再次调用rAF）

长任务API可能会有所帮助，因为它描述了在主线程上花费的工作类型。但我认为它不会有我们回答这些问题所需要的那种精确性。本来会的，但是因为隐私的原因它死了

TDLR:

---

使用，就像在合成器上接收输入时一样。然后使用一些单rAF，双rAF机制，减去一些时间，来估计帧的装运时间。当你有自己喜欢的东西时，大声叫喊；我很感兴趣。

恐怕这不可能。请参阅链接，谢谢！我仍然有兴趣看看我是否可以解决这个问题+/-16ms（即，如果我现在可以忽略这个问题）。谢谢Paul！我们最终测量了单rAF和双rAF，还没有回到如何将两者结合起来的问题上。会让你知道FWIW的VSYNC的事情是有趣的，因为我有一个外部监视器，将只运行在30Hz，最终的结果是，一切放缓了约16毫秒的外部监视器！