Javascript 渲染后的预处理日志性能

我正在尝试注销preact中更新组件并渲染它所花费的时间

代码如下：

handleKeyPress(event) {
    renderingTime = Date.now()
    ...
}

componentDidUpdate() {
    if (renderingTime) {
        console.log('finished rendering ' + (Date.now() - renderingTime))
        this.onNextFrame(function() {
            console.log('finished rendering anim ' + (Date.now() - renderingTime))
        })
    }
}

onNextFrame(callback) {
    setTimeout(function () {
        window.requestAnimationFrame(callback)
    }, 0)
}

然后我从Cobalt浏览器（有点像Chromium）获取跟踪。在这个跟踪中，我可以看到“finished rendering”日志为我提供了javascript执行时间。“finished rendering anim”日志为我提供了javascript执行时间+布局时间

然后，我在跟踪中看到，介质管道中的光栅化器部分之后仍在发生

有没有办法让这部分包括在我的测量中？ 我需要这些测量来运行自动测试，因此需要控制台日志中的结果。

您可以使用

---

您可以测量react应用程序的性能

谢谢您的回答。虽然我使用的是preact，需要控制台中的输出进行自动测试。