Question

我正在使用第三方APM工具，它提供了一个javascript代理，可以深入了解UI呈现时间的可见性。

了解React.js并未真正映射到浏览器时序API，任何人都可以了解我何时会衡量以下指标？我包含了供应商提供的可用API调用。

要报告的指标

最终用户响应时间 - virtualPageStart（）到virtualPageEnd（）
HTML下载时间 - viewChangeStart（）到viewChangeEnd（）
HTML下载＆amp; DOM构建时间 - viewChangeStart（）到viewDOMLoaded（）
DOM构建时间 - viewChangeEnd（）到viewDOMLoaded（）
DOM Ready Time - viewChangeStart to viewDOMLoaded

可用的API调用

markViewChangeStart（）设置视图更改开始时间。
markViewChangeEnd（）设置视图更改结束时间。
markViewDOMLoaded（）设置视图DOM加载时间。
markXhrRequestsCompleted（）设置XHR请求的完成时间。
markViewResourcesLoaded（）设置视图资源加载时间。
markVirtualPageStart（）设置虚拟页面开始时间。
markVirtualPageEnd（）设置虚拟页面结束时间。

感谢!!!

Answer 1

对于大多数这些项目，您实际上不受React本身的影响。您可以使用路由库记录changestart / changeend事件。如果您不使用任何路由库，您的伪代码将如下所示：

markViewChangeStart();
ReactROM.render(component, domNode, function() {
    markViewChangeEnd();
});

对于加载的DOM，您可以在第一次使用markViewChangeEnd时使用：

markViewChangeStart();
ReactROM.render(component, domNode, function() {
    if (!window.rendered) {
        markViewDOMLoaded();
        window.rendered = true;
    }
    markViewChangeEnd();
});

对于RequestsComplete事件，您可以保存一个全局变量来标记您已开始发出请求，当您的所有请求都已解决时，请调用RequestsCompleted（）事件。

我认为可以使用changeend和change start在同一个地方调用页面开始和结束事件。

对于ResourcesLoaded，我不确定如何处理它。

时间React.js应用程序

1 个答案: