Microsoft Edge DevTools 如何分析网页反应测试中的渲染与输入事件时序？

我正在开发一个基于原生 JavaScript 的网页反应时间测试，想了解如何通过 Microsoft Edge DevTools 分析页面颜色变化与用户输入之间的时间关系。

测试场景

测试的基本流程如下：

页面显示橙色，经过一段随机等待时间后切换为绿色。

用户看到绿色后，立即通过鼠标、键盘或触屏作出反应。

页面计算并显示反应时间，单位为毫秒。

这里有一个我想进一步弄清楚的问题：

JavaScript 执行颜色更新的时间，并不一定等于屏幕实际显示新颜色的时间。

因此，我希望了解 Edge DevTools 能够观察到哪些环节，以及这些数据的测量范围。

具体问题

在 Microsoft Edge 的 Performance 面板中，如何查看一次颜色变化过程中 JavaScript 执行、样式更新、绘制以及后续输入事件处理的时间线？

另外，Performance 录制得到的渲染事件和时间戳，是否只能用于分析浏览器内部的处理过程，而不能直接代表显示器实际呈现画面的时间？

期望了解的内容

希望得到一些具体的 Performance 面板使用方法，例如应该关注哪些事件、如何对应颜色变化与输入事件，以及这些数据在网页反应时间测量中有哪些局限。

如果有相关的 Microsoft Edge 官方文档，也欢迎推荐。

感谢！