Have feedback about this explainer? We want to hear it!
Issue #98 tracks community feedback on this explainer.
This is a proposal for a new feature that is not yet in development.
Style recalculation (or style recalc) is the process of iterating through DOM elements on a page, finding all of the CSS style rules that match a given element and then computing the element’s actual style based on these rules. Style recalc needs to happen whenever the applicability of CSS rules may have changed. Some examples include:
Style recalc can be an expensive operation and long-running recalc operations can become performance bottlenecks that web developers need to debug.
The DevTools performance panel records a “Recalculate Style” trace event that shows when style recalculation occurs.
We’d like to offer web developers greater visibility into how time is being spent during style recalc to make it easier to root cause and mitigate performance issues due to recalc.
Developers can already see extra statistics from style recalc in the
edge://tracing UI if the
"blink.debug" tracing tag is enabled.
The statistics show up as a
SelectorStats trace event which includes a table of style rules with the following columns:
This information can be valuable to web developers, but the
edge://tracing UI can be daunting, especially for beginners, and the
"blink.debug" tag needs to be enabled first.
The proposed solution is to display these same statistics in the details view for “Recalculate Style” events in DevTools performance traces, where it will be more visible to web developers who are already familiar with the DevTools Performance tool.
Developers will be able to sort the table by any column, so that they can identify individual rules that take a longer time to process or have a high number of match attempts. If available, the CSS selector text will be enhanced with a link to the source location where the CSS rule is declared. This will let web developers quickly jump to the rule they are interested in so they can continue their investigation.
Below is a mockup of the proposed design, with the new content highlighted in red. Note that links to source locations are not currently shown in this mockup but would be rendered similar to other source links found in DevTools.
Selector statistics in DevTools performance traces will be disabled by default because the underlying
SelectorStats trace event is expensive to record and can have a noticeable impact on page perf.
While enabling this feature would impact raw timings captured throughout the trace, the timings would still be proportional to each other and can still yield useful information to developers.
Developers will need to explicitly enable the feature through a checkbox in the performance panel settings.
The DevTools performance panel already has a similar optional feature named “advanced paint instrumentation”. The checkbox to enable the feature includes a warning about the performance overhead, both in the label and in the tooltip. The settings icon color is also changed to red to remind the user, even while the settings are hidden.
Instead of adding another checkbox to the settings view, we should consider merging the selector statistics and advanced paint instrumentation into a single checkbox named “enable advanced rendering instrumentation (slow)”. This avoids the need for another checkbox in the settings view and allows us to re-use the existing UI for warning about the performance impact.
When the checkbox is enabled, a table of selector statistics will be available in the details view for any “Recalculate Styles” events.
We should provide web developers with resources to understand how to use this new tool effectively. Some patterns in the data worth exploring: