From 7eec4c6bb63f12967c77a003c453aa5cab3320e1 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Thu, 12 Aug 2021 08:40:06 -1000 Subject: [PATCH 1/3] add instructions for how to profile with Hermes --- PERFORMANCE.md | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/PERFORMANCE.md b/PERFORMANCE.md index 192e76e0dd67..a478baac959d 100644 --- a/PERFORMANCE.md +++ b/PERFORMANCE.md @@ -10,7 +10,7 @@ ## Tools -### Chrome Dev Tools > Performance > Timing +### Chrome Dev Tools > Performance > Timing (Web Only) - Profiling in Chrome Dev Tools performance tab in the "Timing" section - This will show various components and how long they took to render. It can be a little intense to dig through it all at first, but the more time you spend with it the easier it gets to separate the signal from noise. @@ -18,6 +18,23 @@ **Suggested:** [React Performance Profiling](https://calibreapp.com/blog/react-performance-profiling-optimization) +### Hermes Profiling (iOS and Android only) + +It's possible, but slightly trickier to profile the JS running on native devices as it does not run in a browser but a JS VM that React Native must spin up first then run the app code. The VM we are currently using on both Android and iOS is called [Hermes](https://reactnative.dev/docs/profile-hermes) and is developed by Facebook. + +In order to profile with Hermes follow these steps: + +- In the metro bundler window press `d` on your keyboard to bring up the developer menu on your device. +- Select "Settings" +- Select "Start Sampling Profiler on Init" +- In metro bundler refresh by pressing r +- The app will start up and a profile will begin +- Once the app loads take whatever action you want to profile +- Press `d` again and select "Disable Sampling Profiler" +- A toast should appear with a path to a profile +- We need to then convert this into something Chrome Dev Tools can use by typing into terminal `react-native profile-hermes .` +- This should create a json file in the directory where we typed the previous command that we can load up into Chrome Dev Tools "Profile" tab and inspect further. + ### React DevTools Profiler - The React DevTools Profiler can also be used to detect similar information to Chrome Dev Tools, but is a little more streamlined. There is also an options cog where you can filter events by cutting at a specified millisecond (length it took for the thing to happen) - Try checking the option to "Record why each component rendered while profiling". This may provide insights into why the component rendered unnecessarily. @@ -27,7 +44,7 @@ ### Why Did You Render? - Why Did You Render (WDYR) sends console notifications about potentially avoidable component re-renders. - It can also help to simply track when and why a certain component re-renders. -- To enable it, set `USE_WDYR=true` in your `.env` file. +- To enable it, set `USE_WDYR=true` in your `.env` file. - You can add or exclude tracked components by their `displayName` in `wdyr.js`. - Open the browser console to see WDYR notifications. From 7009071c5998269cfbc450d64498242acc753c13 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Thu, 12 Aug 2021 08:40:51 -1000 Subject: [PATCH 2/3] Fix typo; --- PERFORMANCE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/PERFORMANCE.md b/PERFORMANCE.md index a478baac959d..4898e7589909 100644 --- a/PERFORMANCE.md +++ b/PERFORMANCE.md @@ -33,7 +33,7 @@ In order to profile with Hermes follow these steps: - Press `d` again and select "Disable Sampling Profiler" - A toast should appear with a path to a profile - We need to then convert this into something Chrome Dev Tools can use by typing into terminal `react-native profile-hermes .` -- This should create a json file in the directory where we typed the previous command that we can load up into Chrome Dev Tools "Profile" tab and inspect further. +- This should create a json file in the directory where we typed the previous command that we can load up into Chrome Dev Tools "Performance" tab via the "Load Profile" option and inspect further. ### React DevTools Profiler - The React DevTools Profiler can also be used to detect similar information to Chrome Dev Tools, but is a little more streamlined. There is also an options cog where you can filter events by cutting at a specified millisecond (length it took for the thing to happen) From 4f81f876de3bd98e3c88a68f76127ad997c4b0c9 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Thu, 12 Aug 2021 09:47:17 -1000 Subject: [PATCH 3/3] actually think this only works on Android... --- PERFORMANCE.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/PERFORMANCE.md b/PERFORMANCE.md index 4898e7589909..c3c7ab59b9b6 100644 --- a/PERFORMANCE.md +++ b/PERFORMANCE.md @@ -18,9 +18,9 @@ **Suggested:** [React Performance Profiling](https://calibreapp.com/blog/react-performance-profiling-optimization) -### Hermes Profiling (iOS and Android only) +### Hermes Profiling (Android only) -It's possible, but slightly trickier to profile the JS running on native devices as it does not run in a browser but a JS VM that React Native must spin up first then run the app code. The VM we are currently using on both Android and iOS is called [Hermes](https://reactnative.dev/docs/profile-hermes) and is developed by Facebook. +It's possible, but slightly trickier to profile the JS running on Android devices as it does not run in a browser but a JS VM that React Native must spin up first then run the app code. The VM we are currently using on both Android and iOS is called [Hermes](https://reactnative.dev/docs/profile-hermes) and is developed by Facebook. In order to profile with Hermes follow these steps: