Analyze CSS selector performance during Recalculate Style events

Sofia Emelianova

The Performance panel marks each long-running task with a red triangle in the upper right corner and a warning in the Summary tab, to indicate work on the main thread that takes a long time to run and has slow performance:

In your performance recordings, some of these long-running tasks may be Recalculate Style events. A Recalculate Style event tracks the time it takes for the browser to do the following:

• Iterate through the DOM elements on a page, to find all of the CSS style rules that match a given element.
• Compute each element's actual style, based on the matching CSS style rules.

CSS styles need to be recalculated whenever the applicability of CSS rules may have changed, such as when:

• Elements are added to or removed from the DOM.
• An element's attributes are changed, such as the value of a class or ID attribute.
• User makes input, such as a mouse move or a change of element focus, which can affect :hover rules.

Long-running Recalculate Style events can be problematic for performance, and can be a cause of long presentation delays that affect your website's Interaction to Next Paint (INP). If you find long-running Recalculate Style events, you can use the Selector Stats tab to understand which of your CSS selectors is taking the most time and slowing down performance.

The Selector Stats tab provides statistics about the CSS rule selectors that were involved in one or more Recalculate Style events within a performance recording.

Record a performance trace with Selector Stats turned on

To view the statistics of your CSS rule selectors during long-running Recalculate Style events, record a performance trace with the Selector Stats capture setting turned on.

Tip: The Selector Stats is turned off by default because it adds more overhead to your performance recordings. Leave it turned on when you need to inspect the performance of Recalculate Style events and other rendering information.

To record a performance trace with selector statistics:

1. Open a web page, for example, the Photo Gallery demo page.

2. Open DevTools and navigate to the Performance panel.

3. In the Performance panel, click the settings Capture settings button and check check_box Enable CSS selector stats.

   

4. Click radio_button_checked Record, run the scenario that you want to improve, then click stop_circle Stop.

Then, view CSS selector statistics, as described in the next sections.

View CSS rule selector statistics for a single event

To view the statistics of the CSS rule selectors that are involved in a single Recalculate Style event:

1. Record a performance trace with Selector Stats turned on.

2. Find a Recalculate Style event in your performance recording and click it.

3. In the bottom section of the Performance panel, open the Selector Stats tab.

Table of CSS selectors in the Selector Stats tab

The Selector Stats tab contains a table of CSS selectors. The table displays the following information for each CSS selector:

Column	Description
Elapsed (ms)	The amount of time the browser spent matching this CSS selector. This time is given in milliseconds (ms), where 1 ms is 1/1000 of a second.
Match Attempts	The number of elements the browser engine attempted to match with this CSS selector.
Match Count	The number of elements the browser engine matched with this CSS selector.
% of slow-path non-matches	The ratio of elements that didn't match with this CSS selector, to the elements that the browser engine attempted to match, and which required the browser engine to use less optimized code to match.
Selector	The CSS selector that was matched.
Style Sheet	The CSS style sheet that contains the CSS selector.

When finished, in the Performance panel, open settings Capture settings and clear check_box Enable CSS selector stats.

View CSS rule selector statistics for multiple events

To view aggregate statistics of the CSS rule selectors that are involved in multiple Recalculate Style events, copy multiple Selector Stats tables into a spreadsheet, as follows:

1. Record a performance trace with Selector Stats turned on.

2. Find the first Recalculate Style event you're interested in, and then click it.

3. In the bottom section of the Performance panel, open the Selector Stats tab.

4. Right-click the selector stats table and select Copy table.

   

5. Paste the table into a spreadsheet, such as Google Sheets.

6. Repeat the previous steps with the other Recalculate Style events you're interested in.

When finished, in the Performance panel, open settings Capture settings and clear check_box Enable CSS selector stats.

View aggregate CSS rule selector statistics for the full recording

To view aggregate statistics of the CSS rule selectors that are involved in the entire performance recording:

1. Record a performance trace with Selector Stats turned on.

2. Click an empty area of the flame chart to deselect any event that may be selected.

3. Select the entire recording range. To do this, double-click the CPU chart at the top of the Performance panel.

4. In the bottom section of the Performance panel, open the Selector Stats tab. You will see a new row at the top with data on totals for all selectors.

When finished, in the Performance panel, open settings Capture settings and clear check_box Enable CSS selector stats.

Analyze CSS selector stats

To sort the data in the Selector Stats table in ascending or descending order, click a column header. For example, to see which CSS selectors take up the most time, click the Elapsed (ms) column header.

To try to improve the performance of your web page, focus on the CSS selectors that:

• Took a long time to calculate (high Elapsed (ms) value).
• Which the browser attempted to match many times (high Match Attempts value).
• Which the browser didn't actually match many elements with (low Match Count value compared to the Match Attempts value).
• Which have a high percentage of slow-path non-matches.

For example, in the previous screenshot:

• The first CSS selector (html body .ps[tooltip...) required the most time.
• The browser engine attempted to match this CSS selector 1104 times, but didn't match any elements.

Therefore, this CSS selector is the first candidate to try to improve.

Try to change your CSS selectors so they require less time to calculate and match fewer elements on the page. How to improve your CSS selectors depends on your particular use case.

Repeat the steps in this tutorial to confirm that your changes helped decrease the Recalculate Style event duration, in the Elapsed (ms) column.

Note: Portions of this page are modifications based on work created and shared by Microsoft and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is authored by Microsoft Edge Team, including Michael Hoffman, Patrick Brosset, Joe Martin, and Zoher Ghadyali.