Page MenuHomePhabricator

Investigate if we can automate to get deeper/more information from Chrome stack traces Recalculate Styles
Closed, ResolvedPublic

Description

In T340715 we could see that we got a performance regressions where more nodes needed to be re-calculated. However looking in the trace, it's hard to understand what's going on (we can only see that number of nodes increased, not why).

I asked in the performance Slack channel if someone new if there's more trace categories that can been turned and I got answer hat there are multiple disabled by default trace categories for devtools but not a specific one. Let me try that out and see what I can find.

  1. Test out trace categories
  2. If we find one, how much overhead does it add? If it's a lot, look into how Mozilla do it: they do one extra run where they get that extra data. That is implemented but we haven't used it on our side.

Event Timeline

The trace category that do the job is:
disabled-by-default-devtools.timeline.invalidationTracking

It gives us extra information like:

Screenshot 2023-07-06 at 10.28.54.png (220×2 px, 73 KB)

Screenshot 2023-07-06 at 10.29.27.png (276×2 px, 136 KB)

However the trace log for the Obama page becomes 15 mb

The trace will cost too much. Instead I've added so we can keep track of number of affected elements for a recalculate style (will need to update the dashboard).