React-devtools: different cost time in react-devtools and Chrome's performance
hi, I am doing performance optimization in my project. But I found the data different in Chrome's performance and react-devtools.
I wanna know where are the two data different? Thanks!
xuzhanhh
All 3 comments
Good question 😄 These two tools report time differently.
The top screenshot is Chrome's Performance tab. React uses the native User Timing API to report these times. They are similar to function times shown in the "Main Thread" tab, in that the time reported for a given component also includes the time spent in its descendants. In other words, React starts the timer when a component begins rendering (e.g. IntlProvider), lets it run while all of its descendants are rendered (e.g. IntlProvider, EditorPage), and then stops it when all rendering work is done.
The second screenshot shows the DevTools Profiler panel. The time it reports for each component only reflects the time spent in that component (e.g. that component's render method and any render phase lifecycles). It does not include the time spent in any of that component's descendants. We chose to display the time this way to make it easier to spot which render methods are the slowest.
If you add up the time spent in the Profiler, you might notice that it is not quite the same as the time spent in the Performance tab. This is because React spends some time outside of (between?) components. The Profiler tab intentionally does not measure this time, but the user timing API may include some of it.
bvaughn
on 2 Nov 2018
@bvaughn thank you! A good intro, but i still have a question that Connect cost 47.2ms in Chrome's Performance but 17ms in Profiler. Is that reasonable for React's other function to cost 30ms?
xuzhanhh
on 3 Nov 2018
Are we talking profiling a development version of React in the above case? If so, then yeah– maybe. It's a little hard for me to say without seeing the whole profiling data, but in addition to DEV-mode only validation checks, React may also be double-rendering your component in DEV mode to tease out side effects.
The DevTools Profiler knows not to count the extra render in this case, but Chrome's profiler doesn't/can't since it's running the whole time children are created and rendered. Chrome also measures time React spends doing things like checking to see if it should re-render a component tree (shouldComponentUpdate).
bvaughn
on 4 Nov 2018
Related issues
CodyReichert
·
5Comments
BrandonWade
·
4Comments
mmahalwy
·
3Comments
levani
·
4Comments
lettywiterock
·
3Comments
Most helpful comment
Good question 😄 These two tools report time differently.
The top screenshot is Chrome's Performance tab. React uses the native User Timing API to report these times. They are similar to function times shown in the "Main Thread" tab, in that the time reported for a given component also includes the time spent in its descendants. In other words, React starts the timer when a component begins rendering (e.g.
IntlProvider), lets it run while all of its descendants are rendered (e.g.IntlProvider,EditorPage), and then stops it when all rendering work is done.The second screenshot shows the DevTools Profiler panel. The time it reports for each component only reflects the time spent in that component (e.g. that component's render method and any render phase lifecycles). It does not include the time spent in any of that component's descendants. We chose to display the time this way to make it easier to spot which render methods are the slowest.
If you add up the time spent in the Profiler, you might notice that it is not quite the same as the time spent in the Performance tab. This is because React spends some time outside of (between?) components. The Profiler tab intentionally does not measure this time, but the user timing API may include some of it.