Question

我正在尝试注销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）。在此跟踪中，我可以看到“完成呈现”日志为我提供了javascript执行时间。 “完成渲染动画”日志为我提供了javascript执行时间+布局时间。

然后我在轨迹上看到media_pipeline中有一个光栅化器部件，后来仍在发生。

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

Answer 1

您可以使用React Performance tool

您可以衡量反应应用的效果

渲染后的预处理日志性能

1 个答案: