React component renders slowly on Samsung S6, but cannot see why in devtools

[redvee78]

Hi,

I am trying to determine why a React component is re-rendering slowly on a Samsung S6.

The component in question is quite a large table, so I'm not actually surprised that it renders quite slowly on a phone, it's more that I can't see the reason why in devtools.

My scenario is I have two links and a table. Tapping one link shows one set of data in the table, tapping the other link shows another set of data in the table.

Very roughly, the page looks like:

+---------------+

| LINK1   LINK2 |

|               |

| TABLE_OF_DATA |

+---------------+

In my scenario, the data in question is loaded via a fetch() request, but the data is cached and so the data is retrieved from cache, not over the network.  The two data sets are of similar size.

In the following profiles, the development version of React was used, and so the "User Timings" from React are included.

The first test of this scenario is to tap the first link to load the first set of data (triggering a re-render of the table), wait for above-the-fold UI to be visible (about 3 seconds after first tap), then tap the second link (triggering a second re-render of the table).

This is what that looks like in devtools.

The second test is to tap the first link, wait for about 10 seconds, then tap the second link.

This is what that looks like in devtools.

A major similarity between the profiles is that the amount of time spent executing JS seems more or less identical.  Also, the "Summary" tab at the bottom of each profile shows a very similar ratio of times.  With the "Idle" time being the overwhelming contribution to the overall time in both profiles, and no other time category being an obvious culprit.

The major difference I can see between the two profiles is the length of the second "Tap" event.

In the first profile, it seems as though Chrome has noticed the Tap event at the point-in-time when it occurred, but was too busy doing other things to run the corresponding event handler. Later on (around the 10.25 seconds mark), the browser has finished what it was doing and can execute the event handler.  In the second profile, it seems as though I have waited enough time for Chrome to have done its thing, and so when I do the 2nd tap (around 12.5 seconds), Chrome is ready to handle it quickly.

I suspect that there is some DOM work/layout/painting/GC, etc, going on below-the-fold that is causing the delay, but I can't show it in devtools.

Does anyone have any suggestions for what I can try to find out where the time is spent?

Thanks,

Paul.

[redvee78]

You will need to right-click on the profile images and "Open in new tab" to view as original size.

[Kayce Basques]

Try running an audit before digging into Performance recordings. I'm doubtful that it will give you the information you need to diagnose this particular issue, but it's worth a try. If download the report and send it as an attachment to a reply in this thread, I can take a look at it, too.

Are you running a web worker or service worker? In the CPU chart near the top of your first screenshot (click-click-delay.png), it looks like the device is completely maxed out doing activity that is off of the main thread. That is what the grey means in the CPU chart. It's actually just maxed out in general. You can see that it gets maxed out doing JavaScript work (yellow), followed by off-main-thread-work (grey), followed by more JS, then rendering (purple), then off-main-thread-work again.

[Kayce Basques]

Actually, I'm mistaken. Grey means unknown activity. Stripes means activity that is off the main thread. Since there are no stripes in your charts, there's no off-main-thread activity.

https://stackoverflow.com/a/38002654/1669860

So those big chunks of grey mean that some form of activity is happening that DevTools doesn't recognize. Interesting...