diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats.md b/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats.md index 293fafd313..1bd698fb9f 100644 --- a/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats.md +++ b/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats.md @@ -10,6 +10,8 @@ ms.date: 05/15/2024 --- # Analyze CSS selector performance during Recalculate Style events +When your webpage has long-running **Recalculate Style** events, to identify which of your CSS selectors are taking up the most time and resulting in slow performance, use the **Selector Stats** tab in the **Performance** tool. 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. + The **Performance** tool highlights each long-running task with a red triangle in the upper right corner, to indicate work on the main thread that takes a long time to run and has slow performance: ![Long-Running Task indicators for events on the main thread with slow performance](./selector-stats-images/long-running-task.png) @@ -24,10 +26,6 @@ CSS styles need to be recalculated whenever the applicability of CSS rules may h * When an element's attributes are changed, such as the value of a `class` or `id` attribute. * When user input occurs, such as a mouse move or a change of which element in a webpage has focus, which can affect `:hover` rules. -When you have long-running **Recalculate Style** events, you can use the **Selector Stats** tab to understand which of your CSS selectors are taking up the most time and resulting in slow 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 enabled diff --git a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md index 50e25b0a0f..c1b21939c1 100644 --- a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md +++ b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md @@ -207,7 +207,8 @@ Status: ## Show option to expose internals in heap snapshots - + _new as of Microsoft Edge 105_ @@ -575,9 +576,7 @@ See also: * [Performance recording event reference](../evaluate-performance/performance-reference.md) * [postMessage Trace Events demo (rendered)](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) * [postMessage Trace Events demo (source code)](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) - +* [postMessage events and handlers are distinguished from other events](../whats-new/2024/04/devtools-124.md#postmessage-events-and-handlers-are-distinguished-from-other-events) in _What's New in DevTools (Microsoft Edge 124)_. Status: * This checkbox is present in Microsoft Edge Canary 129. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128-images/capture-settings-icon.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128-images/capture-settings-icon.png new file mode 100644 index 0000000000..fb8e8f655e Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128-images/capture-settings-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128-images/new-selector-stats.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128-images/new-selector-stats.png index b1a4c50ec3..22a948db4b 100644 Binary files a/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128-images/new-selector-stats.png and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128-images/new-selector-stats.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128-images/old-selector-stats.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128-images/old-selector-stats.png index 86ad046e45..50a2ad1afc 100644 Binary files a/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128-images/old-selector-stats.png and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128-images/old-selector-stats.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128.md b/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128.md index 91f0e8d27a..8a0ece22f9 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128.md @@ -14,13 +14,13 @@ ms.date: 08/22/2024 -## Updated labels for selector stats +## Updated labels for CSS selector stats - + -In the **Performance** tool, the duplicate **Selector Stats** label has been removed from the `Recalculate Style` event details. Selector stats can be enabled by using the dedicated setting for it. +In the **Performance** tool, the duplicate **Selector Stats** label has been removed from the `Recalculate Style` event details. -Also, the **Enable advanced rendering instrumentation (slow)** setting has been renamed back to **Enable advanced paint instrumentation (slow)**. Previously, this setting was used for both paint instrumentation and selector stats. This setting label has been updated because there's now a dedicated setting for selector stats. +The **Enable advanced rendering instrumentation (slow)** checkbox has been renamed to **Enable advanced paint instrumentation (slow)**. Selecting this checkbox now only turns on paint instrumentation, and no longer turns on CSS selector stats as well. To enable gathering CSS selector stats, in the **Performance** tool, select the **Capture settings** (![the Capture settings icon](./devtools-128-images/capture-settings-icon.png)) button, and then select the **Enable CSS selector stats (slow)** checkbox. Before: @@ -30,6 +30,9 @@ After: ![New selector stats labels](./devtools-128-images/new-selector-stats.png) +See also: +* [Analyze CSS selector performance during Recalculate Style events](../../../evaluate-performance/selector-stats.md) + ## Fixed whitespace in Activity Bar right-click menus @@ -45,6 +48,36 @@ The top of each context menu now shows the title again: ![New context menu header](./devtools-128-images/header-title.png) + +## Heap snapshot improvements + + + +In the **Memory** tool, there are several improvements for heap snapshots: + +* Generating heap snapshots is now faster. + +* HTML elements are grouped by tag name, such as ``, `
`, or ``. + +* Shallow sizes now match JavaScript semantics better, by showing fewer internal objects (unless you select the [Show option to expose internals in heap snapshots](../../../experimental-features/index.md#show-option-to-expose-internals-in-heap-snapshots) experiment checkbox and then, before taking a snapshot, select the **Expose internals (includes additional implementation-specific details)** checkbox). + +* The **Include numerical values in capture** checkbox (shown before you take a heap snapshot) has been removed, and heap snapshots now always show numeric values. + +See also: +* [Record heap snapshots using the Memory tool](../../../memory-problems/heap-snapshots.md) + + + +## View WebSocket message activities in the Performance tool + + + +WebSocket activities have been added to the **Network** track in the **Performance** tool, to help correlate JavaScript activity with WebSocket messages. This can help identify whether latency issues are coming from the client's parsing of a message, or from the server's response. + +See also: +* [Introduction to the Performance tool](../../../evaluate-performance/index.md) + + ## Announcements from the Chromium project diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 5bca0cc57d..077094711b 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -633,7 +633,8 @@ - name: Analyze CSS selector performance during Recalculate Style events href: devtools-guide-chromium/evaluate-performance/selector-stats.md - displayName: Performance tool + displayName: Performance tool, css selector stats, css selectors, selector stats, selector statistics, css selector statistics + # Performance monitor tool ---------------------------------------------------- - name: Performance monitor tool items: