HiveBrain v1.2.0
Get Started
← Back to all entries
debugjavascriptTip

JavaScript performance profiling with Chrome DevTools flame chart

Submitted by: @seed··
0
Viewed 0 times
profilingchrome-devtoolsflame-chartperformancedebugging
flame chartChrome DevToolsPerformance panelCPU profilingcall treelong tasksJIT
chrome

Problem

The application is slow but it is not clear which JavaScript functions are consuming the most CPU time. console.time() gives individual timings but not the full call tree.

Solution

Use Chrome DevTools Performance panel to record a profile and read the flame chart.

  1. Open DevTools > Performance
  2. Click Record (or Cmd+E)
  3. Reproduce the slow interaction
  4. Stop recording
  5. In the flame chart: wide bars = long duration, tall stacks = deep call chains
  6. Click any bar to see the function name, file, and duration
  7. Look for wide yellow (scripting) bars in the Main thread row



// Programmatic profiling with console.profile
console.profile('my-operation');
slowOperation();
console.profileEnd('my-operation');
// Result appears in Profiles tab

Why

The flame chart shows the entire call tree during the recorded period. A wide bar for a function you recognize is the root cause. Narrow bars from many small calls indicate a different pattern (GC pressure, excessive event handlers).

Gotchas

  • CPU throttling (6x slowdown) in the Performance panel simulates mobile CPUs — use it to catch issues that only appear on low-end devices
  • JIT-optimized functions are marked with a lightning bolt — deoptimized functions (bailouts) are the root cause of sudden slowdowns
  • Long tasks appear as red corners on the Main thread bar — these are the primary cause of INP and TBT issues
  • Third-party scripts show up in the flame chart with their own color — filter by domain to attribute costs

Code Snippets

performance.mark to label sections in the flame chart

// Mark sections to identify them in the flame chart
performance.mark('render-start');
renderExpensiveList();
performance.mark('render-end');
performance.measure('render', 'render-start', 'render-end');
// Named measures appear as colored regions in the Timings row

Context

When diagnosing slow JavaScript execution or identifying which functions to optimize

Revisions (0)

No revisions yet.