Timing React.js Приложение

Question

Я работаю с сторонним инструментом APM, который предоставляет агента javascript, чтобы дать представление о видимости времени визуализации пользовательского интерфейса.

Понимая, что React.js на самом деле не правильно отображает API тайминга браузера, может ли кто-нибудь пролить свет на то, когда я буду измерять показатели ниже? Я включил доступные API-вызовы, которые предоставляет поставщик.

Метрики сообщить

• Конечный пользователь Время отклика - virtualPageStart() для virtualPageEnd()
• HTML Скачать Time - viewChangeStart() для viewChangeEnd()
• HTML Скачать & DOM Строительство Время - viewChangeStart() для просмотраDOMLoaded()
• DOM Building Time - viewChangeEnd() для просмотраDOMLoaded()
• DOM Ready Time - viewChangeStart к viewDOMLoaded

Доступные API вызовы

• markViewChangeStart() Устанавливает изменение зрения времени запуска.
• markViewChangeEnd() Устанавливает время окончания изменения вида.
• markViewDOMLoaded() Устанавливает время загрузки DOM.
• markXhrRequestsCompleted() Устанавливает время выполнения XHR.
• markViewResourcesLoaded() Устанавливает время загрузки ресурсов просмотра.
• markVirtualPageStart() Устанавливает время начала виртуальной страницы.
• markVirtualPageEnd() Устанавливает время окончания виртуальной страницы.

СПАСИБО !!!

Answer 1

Для большинства из этих предметов вы на самом деле не подвергаетесь действию. Вы можете записывать события 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().

Я думаю, что начальные и конечные события страницы можно вызвать в том же месте с изменением и началом изменения.

Для ресурсов, загруженных, я не уверен, как это можно было бы обработать.