Retained Size vs Shallow Size

The Two Numbers That Explain Everything

Open any heap snapshot in Chrome DevTools and you will see two size columns for every object: Shallow Size and Retained Size. Most developers glance at shallow size and move on. That is a mistake. The difference between these two numbers is the difference between finding a memory leak in 5 minutes and staring at a heap snapshot for hours.

Shallow Size

Shallow size is the memory consumed by the object itself — just the bytes used by its own internal fields and structure. It does not include anything the object points to.

const obj = {
  name: "Alice",
  scores: [95, 87, 91, 88, 94],
};

The shallow size of obj is roughly:

• The object header (hidden class pointer, properties pointer)
• The inline property slots for name and scores
• Typically 32-64 bytes depending on V8's object layout

The shallow size does not include the string "Alice" or the array [95, 87, 91, 88, 94]. Those are separate objects in the heap that obj merely points to.

Retained Size

Retained size is the total memory that would be freed by the garbage collector if this object were removed from the heap. It includes the object itself plus all objects that are only reachable through this object.

The key phrase is "only reachable through." If Object A points to Object B, but Object C also points to Object B, then B is not part of A's retained size — because deleting A would not make B collectible (C still references it).

const controller = {
  cache: new Map(),       // 50MB of cached data
  history: [],            // 10MB of navigation history
  view: document.body,    // shared — also referenced by the DOM
};

The retained size of controller:

• Includes cache (50MB) — if controller is the only reference to this Map
• Includes history (10MB) — if controller is the only reference to this array
• Does NOT include document.body — it is reachable from the DOM tree independently

So shallow size might be ~64 bytes, but retained size is ~60MB.

The Dominator Tree

To understand retained sizes, you need to understand the dominator tree. In graph theory, node A dominates node B if every path from the root to B must pass through A.

In heap terms: Object A dominates Object B if there is no way to reach B from a GC root without going through A first. If A is collected, B must also be collected.

In this example:

• App State dominates Cache (only path from root goes through App)
• App State does NOT dominate Shared Config (Sidebar provides an alternate path)
• If App State is collected: Cache is freed, Shared Config survives

Why Retained Size Matters More for Leak Hunting

When you are hunting memory leaks, shallow size is almost always misleading. Here is a real-world pattern:

class DataManager {
  #rawData = null;
  #processedResults = null;
  #domCache = null;

  load(url) {
    this.#rawData = fetch(url).then(r => r.json());
    this.#processedResults = transform(this.#rawData);
    this.#domCache = buildDOM(this.#processedResults);
  }
}

A DataManager instance has a shallow size of maybe 200 bytes — just the object header and three pointer-sized private fields. But if #rawData is 20MB, #processedResults is 15MB, and #domCache is 5MB, the retained size is ~40MB.

In a heap snapshot sorted by shallow size, this DataManager would not even appear on your radar. Sorted by retained size, it jumps to the top.

Practical Examples

Example 1: Closure Retaining a Large Dataset

function createFilter(data) {
  const processed = heavyTransform(data);

  return function filter(query) {
    return processed.filter(item => item.name.includes(query));
  };
}

const myFilter = createFilter(hugeDataset);

The closure myFilter has a tiny shallow size. But its retained size includes the entire processed array and every object in it.

Example 2: Event Listener Retaining a Component Tree

function initDashboard() {
  const dashboard = buildComplexDOM();
  const charts = loadChartData();

  window.addEventListener('resize', () => {
    resizeCharts(dashboard, charts);
  });
}

The resize handler is a tiny closure. But it closes over dashboard and charts, making its retained size potentially enormous.

How to See Retained Size in DevTools

1. Take a heap snapshot
2. In the Summary view, click the Retained Size column header to sort descending
3. The top entries are your biggest memory consumers
4. Expand any entry to see individual instances
5. Click an instance to see its retaining tree in the lower pane