You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# DevTools: Selector Performance Tracing for Style Calculations
2
2
3
3
Authors:
4
-
-*[Brandon Walderman](https://github.com/bwalderman)*, Senior Software Engineer, Microsoft Edge
4
+
5
+
**[Brandon Walderman](https://github.com/bwalderman)*, Senior Software Engineer, Microsoft Edge.
6
+
7
+
## Feedback
8
+
9
+
Have feedback about this explainer? We want to hear it!
10
+
11
+
**[Issue #98](https://github.com/MicrosoftEdge/DevTools/issues/98)** tracks community feedback on this explainer.
5
12
6
13
## Status of this feature
7
14
8
15
This is a proposal for a new feature that is not yet in development.
9
16
10
17
## Introduction
11
18
12
-
Style recalculation 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.
19
+
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.\
13
20
Style recalc needs to happen whenever the applicability of CSS rules may have changed. Some examples include:
14
21
15
-
- Elements were inserted or removed from the DOM
16
-
- An element's attributes (e.g. class, id) were changed
17
-
- User input such as mouse move or focus change, which can affect `:hover` rules
22
+
* Elements were inserted or removed from the DOM
23
+
* An element's attributes (e.g. class, id) were changed
24
+
* User input such as mouse move or focus change, which can affect `:hover` rules
18
25
19
-
Style recalc can be an expensive operation and long-running style or layout operations can become performance bottlenecks that web developers need to debug.
26
+
Style recalc can be an expensive operation and long-running recalc operations can become performance bottlenecks that web developers need to debug.
20
27
21
28
The DevTools performance panel records a "Recalculate Style" trace event that shows when style recalculation occurs.
22
29
23
30
24
31
25
-
The event currently shows the elapsed time and total number of elements affected, but no information about which elements these are, or which style rules were involved.
26
-
Although the JavaScript location that triggered the style recalc is sometimes included in the trace event, it may not always be obvious how the initiator is related to the affected elements, especially when there are a large number of them.
32
+
The event currently shows the elapsed time and total number of elements affected, but no information about which elements these are, or which style rules were involved.\
33
+
Although the JavaScript location that triggered the style recalc is sometimes included in the trace event, it may not always be obvious how the initiator is related to the affected elements, especially when there are a large number of them.\
27
34
Overall, this can make it difficult for web developers to understand how to fix long-running style recalc tasks with the information at hand.
28
35
29
36
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.
30
37
31
38
## Existing Solutions
32
39
33
-
Developers can already see extra statistics from style recalc in the `edge://tracing` UI if the `"blink.debug"` tracing tag is enabled.
40
+
Developers can already see extra statistics from style recalc in the `edge://tracing` UI if the `"blink.debug"` tracing tag is enabled.\
34
41
The statistics show up as a `SelectorStats` trace event which includes a table of style rules with the following columns:
35
42
36
-
- Elapsed CPU time spent evaluating the style rule (lower is better)
37
-
- Number of "fast reject" elements that were cheap/efficient to eliminate from matching (higher portion of attempts is better)
38
-
- Number of elements the Blink rendering engine attempted to match with the rule
39
-
- Number of elements that were actually matched
40
-
- CSS selector text
43
+
* Elapsed CPU time spent evaluating the style rule (lower is better).
44
+
* Number of "fast reject" elements that were cheap/efficient to eliminate from matching (higher portion of attempts is better).
45
+
* Number of elements the Blink rendering engine attempted to match with the rule.
46
+
* Number of elements that were actually matched.
47
+
* CSS selector text.
41
48
42
49
43
50
51
+
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.
52
+
44
53
## Proposed Solution
45
54
46
-
This information can be valuable to web developers, but the `edge://tracing` UI can be daunting, especially for beginners.
47
-
The proposed solution is to display these same statistics in the details view for "Recalcuate Style" events in DevTools performance traces, where it will be more visible to web developers who are already familiar with the DevTools performance panel.
55
+
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.
48
56
49
-
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.
57
+
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.\
50
58
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.
51
59
52
-
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.
60
+
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.
53
61
54
-
62
+
55
63
56
64
## Usage
57
65
58
-
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.
59
-
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.
66
+
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.\
67
+
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.\
60
68
Developers will need to explicitly enable the feature through a checkbox in the performance panel settings.
61
69
62
-
The DevTools performance panel already has a similar optional feature named "advanced paint instrumentation".
63
-
The checkbox to enable the feature includes a warning about the performance overhead, both in the label and in the tooltip.
70
+
The DevTools performance panel already has a similar optional feature named "advanced paint instrumentation".\
71
+
The checkbox to enable the feature includes a warning about the performance overhead, both in the label and in the tooltip.\
64
72
The settings icon color is also changed to red to remind the user, even while the settings are hidden.
65
73
66
74
67
75
68
-
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)".
76
+
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)".\
69
77
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.
70
78
71
79
When the checkbox is enabled, a table of selector statistics will be available in the details view for any "Recalculate Styles" events.
@@ -74,15 +82,11 @@ When the checkbox is enabled, a table of selector statistics will be available i
74
82
75
83
We should provide web developers with resources to understand how to use this new tool effectively. Some patterns in the data worth exploring:
76
84
77
-
- Expensive unused selectors
78
-
- Expensive broadly scoped selectors
79
-
- Underutilized selectors (low match count / match attempts)
80
-
81
-
## Feedback
82
-
83
-
Have feedback? We want to hear it! *[Issue #98](https://github.com/MicrosoftEdge/DevTools/issues/98)* tracks community feedback on this explainer.
85
+
* Expensive unused selectors.
86
+
* Expensive broadly scoped selectors.
87
+
* Underutilized selectors (low match count / match attempts).
0 commit comments