Skip to content

Compute FlameGraphTiming rows lazily#6126

Merged
mstange merged 2 commits into
firefox-devtools:mainfrom
mstange:push-uqltltrpluyk
Jun 26, 2026
Merged

Compute FlameGraphTiming rows lazily#6126
mstange merged 2 commits into
firefox-devtools:mainfrom
mstange:push-uqltltrpluyk

Conversation

@mstange

@mstange mstange commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Before this PR, we were always computing positioning information for the entire flame graph, even though the viewport is usually too small to display the entire flame graph - only the N root-most rows are displayed, until the user starts scrolling / panning. This PR changes it so that we only compute the box positions / "FlameGraphTiming" for the rows that get rendered by the flame graph canvas. This speeds up the initial render of the flame graph panel.

When switching to the Flame Graph panel on https://share.firefox.dev/4g4xGue , with a flame graph canvas height of 564px, I'm getting the following profiles:

Before: https://share.firefox.dev/4w2QEG3 (410ms tab switch)
After: https://share.firefox.dev/3QYB7IA (272ms tab switch)

@codecov

codecov Bot commented Jun 24, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 98.36066% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 83.46%. Comparing base (add6b76) to head (f31eedf).
⚠️ Report is 6 commits behind head on main.

Files with missing lines Patch % Lines
src/profile-logic/flame-graph.ts 98.07% 1 Missing ⚠️
Additional details and impacted files
@@           Coverage Diff           @@
##             main    #6126   +/-   ##
=======================================
  Coverage   83.45%   83.46%           
=======================================
  Files         342      342           
  Lines       36075    36094   +19     
  Branches    10106    10108    +2     
=======================================
+ Hits        30108    30126   +18     
- Misses       5539     5540    +1     
  Partials      428      428           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@mstange mstange force-pushed the push-uqltltrpluyk branch from c06737a to 427fa45 Compare June 24, 2026 19:21
@mstange mstange requested a review from fatadel June 24, 2026 19:21
@mstange mstange self-assigned this Jun 24, 2026
@mstange mstange force-pushed the push-uqltltrpluyk branch 5 times, most recently from b131f01 to e1da1db Compare June 24, 2026 20:14

@fatadel fatadel left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Left 1 nit.

Comment thread src/profile-logic/flame-graph.ts Outdated
mstange added 2 commits June 26, 2026 09:31
This lets us build the timing rows lazily, as the flame graph
scrolls them into view.

Building the rows isn't that expensive with the regular flame
graph, but it'll be more expensive for the inverted "calls to
the selected function" icicle flame graph that I'm planning to
add to the function list panel.
This takes advantage of the fact that the flame graph now requests
a row only once it's on the screen.

Note that there's a difference between "FlameGraphRows" and
"FlameGraphTiming" rows.
The FlameGraphRows are still computed eagerly. It's just the timing
that is now computed lazily per displayed row.
The FlameGraphRows are based on the call node info and independent of
sample counts and preview selection.

When switching to the Flame Graph panel on https://share.firefox.dev/4g4xGue ,
with a flame graph canvas height of 564px, I'm getting the following
profiles:
Before: https://share.firefox.dev/4w2QEG3 (410ms tab switch)
After: https://share.firefox.dev/3QYB7IA (272ms tab switch)

In those profiles you can also see the different memory usage characteristics.
@mstange mstange force-pushed the push-uqltltrpluyk branch from e1da1db to f31eedf Compare June 26, 2026 13:32
@mstange mstange enabled auto-merge June 26, 2026 13:33
@mstange mstange merged commit f641363 into firefox-devtools:main Jun 26, 2026
21 checks passed
@canova canova mentioned this pull request Jun 29, 2026
canova added a commit that referenced this pull request Jun 29, 2026
Changes:

[Nazım Can Altınova] Bump profiler-cli version to 0.3.0 (#6104)
[Markus Stange] First typed array: Allow profile.shared.stackTable.frame
to be an Int32Array (#6087)
[Nazım Can Altınova] Show more user friendly errors for unsupported
profile version in both the frontend and the cli (#6107)
[fatadel] Expose counter information in profiler-cli (#6084)
[Markus Stange] Split getSelfAndTotal. (#6113)
[Markus Stange] Add missing transform shortcut key handling for S
(focus-self) (#6117)
[Markus Stange] Remove unused isInverted prop from FlameGraphCanvas.
(#6116)
[Markus Stange] Change sidebar splitter CSS to only apply to the
sidebar, not to all splitters under .DetailsContainer (#6114)
[Markus Stange] Pass callNodeInfo to handleCallNodeTransformShortcut.
(#6115)
[Markus Stange] Move column declarations out into a separate file
(#6119)
[fatadel] Keep menu panels above the selected-marker tooltip (#6125)
[Nazım Can Altınova] Make sure to always sanitize source contents even
when no PII sanitization is requested (#6127)
[Markus Stange] Compute FlameGraphTiming rows lazily (#6126)
[Markus Stange] Create a non-connected FlameGraph component (#6118)
[Nazım Can Altınova] 🔃 Sync: l10n -> main (June 29, 2026) (#6130)

And special thanks to our localizers:

de: Michael Köhler
el: Jim Spentzos
en-GB: Ian Neal
es-CL: ravmn
fr: Théo Chevalier
fur: Fabio Tomat
fy-NL: Fjoerfoks
ia: Melo46
it: Francesco Lodolo [:flod]
nl: Mark Heijl
ru: Valery Ledovskoy
sv-SE: Luna Jernberg
zh-TW: Pin-guang Chen
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants