Skip to content

Commit 73363b8

Browse files
committed
Remove single line breaks.
1 parent 383dca8 commit 73363b8

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

explainers/StyleTracing/explainer.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ This is a proposal for a new feature that is not yet in development.
1616

1717
## Introduction
1818

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.\
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.
2020
Style recalc needs to happen whenever the applicability of CSS rules may have changed. Some examples include:
2121

2222
* Elements were inserted or removed from the DOM
@@ -29,15 +29,15 @@ The DevTools performance panel records a "Recalculate Style" trace event that sh
2929

3030
![A DevTools performance trace with a Recalculate Style event](current-recalc-style-trace.png)
3131

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.\
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.
3434
Overall, this can make it difficult for web developers to understand how to fix long-running style recalc tasks with the information at hand.
3535

3636
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.
3737

3838
## Existing Solutions
3939

40-
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.
4141
The statistics show up as a `SelectorStats` trace event which includes a table of style rules with the following columns:
4242

4343
* Elapsed CPU time spent evaluating the style rule (lower is better).
@@ -54,7 +54,7 @@ This information can be valuable to web developers, but the `edge://tracing` UI
5454

5555
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.
5656

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.\
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.
5858
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.
5959

6060
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.
@@ -63,17 +63,17 @@ Below is a mockup of the proposed design, with the new content highlighted in re
6363

6464
## Usage
6565

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.\
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.
6868
Developers will need to explicitly enable the feature through a checkbox in the performance panel settings.
6969

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.\
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.
7272
The settings icon color is also changed to red to remind the user, even while the settings are hidden.
7373

7474
![DevTools performance panel settings with advanced paint instrumentation enabled](advanced-paint.png)
7575

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)".\
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)".
7777
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.
7878

7979
When the checkbox is enabled, a table of selector statistics will be available in the details view for any "Recalculate Styles" events.

0 commit comments

Comments
 (0)