Significantly higher performance in React whilst profiling with Chrome

user_7729462 0
Viewed 302

I'm working on a gant-ish scheduler using React. The Scheduler is comprised of SVGs which are generated by the data. The data is manipulated by the mouse events and business logic.

Recently, performance has become an issue (likely due to poor coding in general), so I decided to profile it using Chrome's profiler (the same anomaly occurs in multiple other web browsers, see below).

However, I noticed immediately that performance significantly improved whilst I was running the profiler!

This doesn't make much sense to me at all since normally profilers are expected to reduce performance.

Here is a video recorded at 60fps with Chrome's fps counter with and without profiling the code.

As you can see there is a jump from about 9fps without the profiler to 40fps with the profiler running.

I've got a feeling its related to mouseevent frequency, but Google hasn't helped much (mouse move events are an RxJs Stream which is subscribed to by the scheduler).

Any ideas?

Still shots of profiler results:
Zoomed out
Zoom-out to show chrome renders
Zoomed in Zoom-in to show an individual code loop
"BubbleCopy" and the one to the right are made by me. The ForceUpdate() is called manually at the end of each cycle if the mousemovement causes a state change.
(I've intentionally chosen to do this over using setState or prop changes since I need to change state more often than I require a full re-render and require a deeper object structure. Furthermore, in further testing I've separated rendering to occur after a set period, I've separated mouse events to poll the mouse position after a set period, and have I've changed these periods to co-incide/multiples/random to no avail.)

Additional Notes: All Chrome extensions were disabled in this test.

EDIT: Testing across various browsers:

  1. Chrome - Profiling improves performance
  2. Edge - Profiling improves performance
  3. Internet Explorer - Lol.
  4. Firefox - Profiling improves performance, but base performance is better overall.

UPDATE: The performance issues were caused by using JSON.parse(JSON.stringify(bubble)) to deep-copy the "bubbles". Changing this to a recursiveDeepCopy function greatly increased the performance.
This doesn't explain why profiling the code made it a tonne faster, nor does it explain why firefox had no performance issues, but hopefully someone with a similar problem in the future will encounter a similar fix.
Please comment if anyone ever figures this out.

reactjs google-chrome-devtools profiling javascript performance
1 Answers

I was having the same issue, almost to the letter, tons of SVG's, data manipulation on mouse hover.

I kept noticing performance on hover intermittently fluctuate. Sometimes it was smooth as butter, other times super janky. And when trying to identify the issue with the profiler, the issue just resolves itself. I couldn't figure it out.

It appears that the issue is actually caused by the devtools themselves. I usually develop with devtools open since I constantly refer to it. On occasion though, when refreshing the whole build or starting for the first time that day, the performance magically improved. At these times, devtools wasn't open.

When actively using the profiler, it's likely that the devtools are optimized in a way that they do not utilize CPU/RAM nearly as much (like preventing elements panel updates) since we're trying to get an accurate picture or performance of the app itself.

My best guess is that when you have hundreds of large, complex elements changing rapidly, the devtools itself impacts performance significantly due to updates in the elements panel.

You probably fixed the root issue by correcting a significant underlying performance issue, so the additional overhead of the devtools no longer impacted you. However, I continued to have the jankiness even after every performance optimization under the sun (turned out to be a useful exercise nonetheless, so thanks devtools!). It seems my DOM tree is just too complex for the devtools smoothly to keep up with on my computer (hundreds of SVG paths with hundreds of data points each).

user_24916780
Related