定時React.js應用程序

Question

我正在使用第三方APM工具，該工具提供了一個JavaScript代理，可深入了解UI呈現時間的可視性。

了解到React.js不能很好地映射到瀏覽器計時API上，任何人都可以深入了解何時測量以下指標嗎？ 我包括了供應商提供的可用API調用。

報告指標

• 最終用戶響應時間-virtualPageStart（）到virtualPageEnd（）
• HTML下載時間-viewChangeStart（）到viewChangeEnd（）
• HTML下載和DOM構建時間-viewChangeStart（）到viewDOMLoaded（）
• DOM構建時間-viewChangeEnd（）到viewDOMLoaded（）
• DOM准備時間-viewChange開始查看DOMLoaded

可用的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，我不確定如何處理。