React: Release a tool for statistical perf analysis (a replacement for ReactPerf)
Do you want to request a feature or report a bug?
A feature
What is the current behavior?
N/A
What is the expected behavior?
It's great that React 16 integrates with the timeline in browsers dev tools and that is very helpful in cases where you are trying to fix the performance of a specific thing. However I do miss the perf tool from previous versions and could not find any issue tracking a re-implementation of such a tool.
What was great in the perf tool that is not covered as well with timeline integration?
- Easily see which components render needlessly and therefore should be easily eliminated with sCU (and what impact it will give)
- Easily see the collective render time of a component. I might for example have a component that renders very fast but which have very many instances and thus contribute to a significant render time anyway.
- Give an overview of which components are slow by themselves and which are fast by themselves but render slow components. The flamegraph shows this, but I find it to specific in some scenarios with too much detail that can distract.
Basically the wasted, exclusive and inclusive tables. The DOM table I feel is much better represented by the timeline integration.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
16, yes the perf addon in 15 was good.
Pajn
All 6 comments
Basically the wasted, exclusive and inclusive tables.
For exclusive and inclusive tables it might make sense to build something on top of Performance Observer API exposed by the browsers. This uses the high precision timings that we emit via our integration with User Timing API.
In fact @wwwillchen already created a proof of concept a while ago: https://github.com/facebook/react-devtools/issues/801. It would be great if someone could take it, polish, and turn into an npm module.
The "wasted" table is more complicated and I'd rather not get into it until we figure out the async story in Fiber. It's not clear to me how it should work in async mode, and I'd rather not invest effort into it now if it will break later anyway.
gaearon
on 23 Oct 2017
Hey! Can I work on this? I could take a look at @wwwillchen's work and then turn it into a usable npm module.
nitin42
on 10 Dec 2017
Totes!
gaearon
on 10 Dec 2017
Seems like @bvaughn's upcoming DevTools Profiler should help with this.
gaearon
on 15 Aug 2018
That sounds super interesting. Is there a place where the progress can be followed?
Pajn
on 15 Aug 2018
gaearon
on 15 Aug 2018
Related issues
trusktr
路
3Comments
jvorcak
路
3Comments
tleunen
路
3Comments
bloodyowl
路
3Comments
DimitarChristoff
路
3Comments
Most helpful comment
For exclusive and inclusive tables it might make sense to build something on top of Performance Observer API exposed by the browsers. This uses the high precision timings that we emit via our integration with User Timing API.
In fact @wwwillchen already created a proof of concept a while ago: https://github.com/facebook/react-devtools/issues/801. It would be great if someone could take it, polish, and turn into an npm module.
The "wasted" table is more complicated and I'd rather not get into it until we figure out the async story in Fiber. It's not clear to me how it should work in async mode, and I'd rather not invest effort into it now if it will break later anyway.