Description
Proposal: Provide better ways to analyze React Native performance on Windows
Summary
Currently, it is hard to analyze performance of React Native on Windows applications. Existing tools are either too low-level (like Windows Performance Analyzer with which it is hard to gain insight into JavaScript issues) or are too high-level (the Chromium dev tools for React Native only give insight into the JavaScript world and not into more native areas like when XAML measures the layout, paints; and how long it takes).
First, we need to close the performance profiling gap to other React Native platforms (e.g. Android) which have tools like systrace to get insight into what happens on which thread and when:
Reference: https://reactnative.dev/docs/profiling
Then, the gap to the powerful, easy-to-use and higher-level Chromium Dev Tools for HTML-based apps needs to be closed which for example allow to:
- Analyze when the browser renders as part of a performance profile:
The equivalent would be to show when XAML measures, renders and paints to find culprits and unexpected reflows, in addition to the already available information about what the JavaScript executes. - Get insight about rendering in the running app, e.g. when an area of the app is re-painted:
Motivation
We should provide React Native developers on Windows with powerful tools to analyze any performance issues they are seeing to allow them to find and rectify performance culprits easily and to make sure React Native apps are delightful and fast to use.
This would also avoid having apps using React Native that should be faster than React DOM-based apps in theory but are actually slower in practice due to the developer not having the tools necessary to unleash the full potential of the native platform.