This is the flow of the CRP:
The colors are purposefully as they are. This is how they are represented in the profile visualization.
Here’s a performance recording of a simple app:
Do it yourself
- Open the app: https://yonatankra.com/performance/crp.html
- Start profiling
- Click the button a few times
- Stop the profiling
- Zoom into one of the click events
You can view the CRP in your app – just go to chrome dev tools’ performance tab and start recording.