Skip to content

Allocation Timeline and Sampling

advanced14 min read

Beyond Snapshots: Watching Memory in Real Time

Heap snapshots are powerful, but they are photographs — frozen moments. They tell you what is in memory, but not when it got there or how fast it is accumulating.

That is where allocation profiling comes in. Chrome DevTools gives you two allocation profiling tools, each with a different tradeoff between accuracy and overhead.

Mental Model

If a heap snapshot is like a census ("count everyone right now"), then the allocation timeline is like a security camera ("record everyone entering and leaving over time"). The allocation sampler is like a bouncer doing random spot-checks ("sample a fraction of people entering"). The camera catches everything but slows down the door. The bouncer is faster but might miss some entrants.

Allocation Instrumentation Timeline

This is the "security camera" tool. It records every allocation as it happens, showing you a timeline of memory activity.

How to Use It

  1. Open Chrome DevTools → Memory tab
  2. Select "Allocation instrumentation on timeline"
  3. Click Start
  4. Perform the actions you want to profile
  5. Click Stop

The result is a timeline with blue and grey bars at the top and a snapshot-like view at the bottom.

Reading the Bars

Bar ColorMeaningAction
BlueObjects allocated at this point in time that are STILL alive when you stopped recordingThese are your leak suspects — they were allocated and never freed
GreyObjects allocated at this point in time that WERE garbage collected before you stoppedThese are normal — allocated temporarily and properly cleaned up

A healthy app shows mostly grey bars — objects are created and collected naturally. A leaking app shows persistent blue bars, especially if they accumulate over time.

Clicking into the Timeline

You can click on any blue bar (or drag to select a time range) to see exactly which objects were allocated during that window. The bottom pane shows them grouped by constructor, just like the Summary view in a heap snapshot.

This is incredibly powerful for answering: "what specific action caused these allocations?"

Execution Trace
Start Recording
Allocation timeline begins capturing
Every object allocation is tracked
User Action A
Navigate to dashboard page
Blue bars appear — new objects allocated
User Action B
Navigate back to home page
Some bars turn grey (collected), some stay blue (leaked)
Repeat 5x
Navigate back and forth 5 times
Leaked allocations accumulate — growing blue bars
Stop Recording
Timeline complete
Blue bars at each navigation point show the leak
Quiz
You record an allocation timeline while navigating back and forth between two pages 5 times. You see 5 clusters of blue bars that never turn grey. What does this indicate?

Overhead Warning

The allocation instrumentation timeline tracks every allocation. This has significant performance overhead — your app will run noticeably slower during recording. The GC behavior may also change because of the instrumentation.

Use this tool for:

  • Short, targeted investigations (30 seconds to 2 minutes)
  • Pinpointing exactly when a leak occurs during a user flow
  • Identifying which constructor types are being leaked

Do not use this for:

  • Long-running sessions (the overhead skews results)
  • Performance benchmarking (the tool itself causes slowdowns)
  • Production monitoring (too heavy)

Allocation Sampling Profiler

This is the "bouncer doing spot-checks" tool. Instead of tracking every allocation, it statistically samples allocations at regular intervals.

How to Use It

  1. Open Chrome DevTools → Memory tab
  2. Select "Allocation sampling"
  3. Click Start
  4. Perform the actions you want to profile
  5. Click Stop

The result looks like a flame chart or call tree — it shows you which functions are responsible for the most allocations.

What It Shows

Unlike the instrumentation timeline (which shows what was allocated and when), the sampling profiler shows where allocations happen in your code:

  • Self size — memory allocated directly by this function
  • Total size — memory allocated by this function and everything it calls
  • Function name and location — the exact file and line number
FeatureAllocation TimelineAllocation Sampling
TracksEvery allocationStatistical sample of allocations
OutputTimeline with blue/grey bars + object listCall tree showing which functions allocate most
OverheadHigh — noticeably slows the appLow — minimal performance impact
Best forFinding WHEN leaks happenFinding WHERE (which code) allocates most
DurationShort sessions (under 2 minutes)Longer sessions (minutes to hours)
Precision100% accurate — sees everythingStatistical — may miss infrequent allocations
Quiz
You need to find which function in your codebase is responsible for excessive memory allocation, but the allocation happens gradually over 10 minutes of usage. Which tool should you use?

Reading the Sampling Results

The results appear in three views:

Chart view — A flame chart where each bar represents a function. Width corresponds to allocation size. Read bottom to top — the bottom function called the function above it.

Heavy (Bottom Up) — Sorted by which functions directly allocated the most memory. Start here to find the hotspots.

Tree (Top Down) — Shows the call tree from entry points down. Useful for understanding the allocation path — which user action triggers which function chain.

Common Trap

The sampling profiler can miss allocations that happen very quickly and infrequently. If a function allocates a 100KB object once during a 10-minute session, the sampler might not catch it. But if a function allocates 100 bytes every millisecond (totaling 60MB over 10 minutes), the sampler will definitely find it. The profiler is optimized for finding hot allocation paths, not rare one-off allocations. For rare allocations, use heap snapshot comparison instead.

The Memory Panel Workflow

Here is a decision tree for choosing the right tool:

Combining Tools

The most effective workflow combines all three:

  1. Heap snapshot comparison to confirm a leak exists (three-snapshot technique)
  2. Allocation timeline to pinpoint when during your user flow the leak occurs
  3. Allocation sampling to find the exact function and line number responsible
  4. Heap snapshot retaining path to understand why the leaked object is not being collected
Quiz
You confirmed a memory leak using heap snapshots. You know the leaked objects are EventListener closures. What is the most efficient next step to find the exact code creating them?
Under the hood: how allocation sampling works

The allocation sampling profiler uses a technique called Poisson sampling. V8 intercepts allocation calls and randomly decides whether to record each one based on a sampling interval (defaulting to about 512KB of allocation between samples). When it decides to record, it captures the full call stack at that moment. Over time, the statistical distribution accurately represents which functions are responsible for the most total allocation. The mathematical guarantee is that functions allocating more memory are proportionally more likely to be sampled. This is the same technique used by Google-wide profiling tools like pprof.

Key Rules
  1. 1Use allocation timeline for short, targeted leak investigations — it tracks every allocation but has high overhead
  2. 2Use allocation sampling for longer sessions or finding hot allocation paths — it has low overhead but may miss rare allocations
  3. 3Blue bars in the timeline mean objects still alive — grey means properly collected
  4. 4Combine tools: snapshots to confirm, timeline to locate in time, sampling to find the code, retaining paths to find the reference
What developers doWhat they should do
Running the allocation instrumentation timeline for long sessions
The instrumentation overhead skews results and makes your app sluggish, which changes GC behavior
Keep instrumentation sessions under 2 minutes — use sampling for longer runs
Using only one memory tool for the entire investigation
Each tool answers a different question — what is leaking, when it leaks, and which code is responsible
Combine heap snapshots, allocation timeline, and allocation sampling for a complete picture
Assuming all blue bars are leaks
Blue means 'still alive when recording stopped' — not necessarily 'should have been collected'
Some objects are intentionally long-lived (caches, app state, singletons)
Ignoring the Bottom Up view in the sampling profiler
The Top Down view shows call paths, but Bottom Up immediately surfaces the actual hot spots
Start with Bottom Up to find functions with the highest direct allocation