Chrome's New Memory Usage Feature: A Deep Dive for Developers

Chrome has introduced a new feature that provides users and developers with better insights into memory usage: hover cards that display memory consumption for each active tab. This enhancement, initially available in Chrome Canary and now present in Chrome 119+, offers transparency into tab throttling behaviors and provides a clear picture of a website's memory footprint. Let's explore this feature and how developers can use it to create efficient web applications.

Understanding Chrome's Memory Usage Hover Cards

When you hover over a tab in Chrome, a popup will appear displaying the tab's RAM usage. Importantly, it also indicates whether Chrome's "Memory Saver" feature has frozen the tab to conserve memory. This is invaluable for understanding resource consumption on a per-tab basis.

This feature offers two key benefits:

Transparency: Users can see how much memory each tab is using, empowering them to make informed decisions about which tabs to keep open.
Developer Insight: Developers gain insight into their site's memory consumption, allowing them to optimize their code for better performance.

The hover card displays the memory consumed by the page itself and any background processes it utilizes. "State suspension" happens when Memory Saver determines a tab has been inactive for a sufficient period and freezes it, which frees up memory for other tasks.

Memory Saver: Optimizing Chrome's Resource Usage

Memory Saver is a crucial feature designed to improve performance when numerous tabs are open. It works by putting inactive tabs to sleep, freeing up memory for active tabs.

Google states that the latest version of Chrome with Memory Saver enabled can reduce browser memory usage by up to 40% and save up to 10GB of RAM.

Memory Saver is part of a larger suite of "Performance Controls." This also includes "Energy Saver," which aims to extend battery life. These controls intelligently optimize Chrome's performance based on system constraints. They use signals like tab visibility, audio playback, and page lifecycle events to determine tab inactivity.

When a tab remains in the background, Chrome freezes JavaScript execution and places the tab in a low-memory state. The tab automatically reloads when it's brought back into focus.

Measuring Memory Usage: Tools and Techniques

As web applications become more complex, efficient memory management becomes critical. Memory leaks or inefficient usage can lead to performance bottlenecks or even crashes. Chrome DevTools provides robust tools for debugging these memory problems.

Performance Monitor: Real-Time Insights

The Performance Monitor provides a high-level, real-time view of memory usage alongside other key metrics such as CPU utilization, FPS, and DOM nodes.

To access it, open Chrome DevTools and click the three-dot menu, then select "More tools" -> "Performance monitor".

Watch for these key indicators:

Steadily increasing JS Heap or DOM Nodes: Continuous increases over time often indicate a memory leak.
Spikes in JS Heap after Certain User Actions: Spikes suggest inefficient operations triggered by user interactions.

The Performance Monitor helps confirm suspicions about potential memory issues so you can investigate further.

Memory Panel: Detailed Analysis with DevTools

The Memory panel in Chrome DevTools offers extensive insight into a page's memory consumption.

Key functionalities of the Memory panel:

Snapshot Heap Allocation: Captures a snapshot of memory usage, broken down by categories like DOM nodes and JS objects. Comparing multiple snapshots can reveal memory leaks.
Record Allocation Timelines: Displays real-time allocation activity during user interactions. Spikes indicate inefficient operations. You can filter by component to isolate its impact.
Allocation Sampling View: Maps memory usage to individual page components like documents, frames, web workers, and graphics layers, revealing the sources of high memory consumption.

Tracking object's heap allocation involves starting a recording, performing a sequence of actions, and then stopping the recording for analysis.

Performance APIs: Programmatic Memory Measurement

For programmatic memory measurement, the browser API performance.measureUserAgentSpecificMemory() enables measurement of a page's total memory usage.

function scheduleMeasurement() {
  // Check measurement API is available.
  if (!window.crossOriginIsolated) {
    console.log('performance.measureUserAgentSpecificMemory() is only available in cross-origin-isolated pages');
    console.log('See https://web.dev/coop-coep/ to learn more')
    return;
  }
  if (!performance.measureUserAgentSpecificMemory) {
    console.log('performance.measureUserAgentSpecificMemory() is not available in this browser');
    return;
  }
  const interval = measurementInterval();
  console.log(`Running next memory measurement in ${Math.round(interval / 1000)} seconds`);
  setTimeout(performMeasurement, interval);
}

This method returns the combined RAM usage of the current page and associated contexts like iframes and workers. The result includes breakdowns attributing memory usage to specific components.

This API can be used for real-user monitoring (RUM) data collection to identify gradual leaks or regressions after site changes. However, be aware that measureUserAgentSpecificMemory() reflects each browser’s internal memory representation, so results vary across browsers. Relative comparisons across browsers are more meaningful.

Common Causes of Memory Leaks in Web Apps

Many memory leaks arise from retaining stale object references, thwarting garbage collection's cleanup efforts.

Common causes:

Forgetting to Remove Event Listeners: Failing to remove event listeners on DOM detachment.
Unintentional DOM Element References in Closures: Capturing references to DOM elements within closures.
Growing Data Structures: Uncontrolled growth of data structures like Maps or Arrays without proper clearing.
Failing to Close Web Workers: Not explicitly closing web workers.
Lingering References Between Parent and Iframes: Unintentional references between parent and iframe contexts.

Memory leaks often manifest gradually, so profiling memory usage during typical user flows helps identify the sources. Tools like Chrome DevTools and fuite can pinpoint growing objects. Addressing leaks may necessitate re-architecting some logic.

Aim for stable, relatively flat memory usage over time, rather than sawtooth patterns indicative of accumulation between resets. Even smaller leaks (under 1MB) can be worth fixing, especially if they accumulate over extended sessions.

Conclusion: Memory Optimization for the Win

Chrome’s new hover cards offer useful insight into per-tab memory usage, allowing you to fine-tune your development practices. Using these cards in conjunction with Chrome DevTools, performance APIs, and careful optimization can help you deliver smoother, memory-efficient web apps for your users.

By understanding how Chrome manages memory and utilizing the provided tools, developers can proactively address memory issues and create web experiences that are both performant and user-friendly.

Further Reading: