Chrome now shows each active tab’s memory usage!

5 min read Oct 4, 2023

In Chrome Canary, we recently introduced hover cards that show the memory usage for each open tab . When you hover over a tab, a popup will display the tab’s RAM usage and whether Chrome’s Memory Saver feature has frozen the tab to conserve memory.

Memory usage in hover cards, as tested in Chrome 119+

This feature provides transparency into Chrome’s tab throttling behaviors and gives users insight into a site’s memory consumption .

The current usage indicates memory consumed by the page itself along with any background processes. State suspension happens when Memory Saver determines the tab has been inactive for a sufficiently long period.

The new hover cards build on Chrome’s Memory Saver feature and can also be enabled via about:flags:

The hover cards feature can be manually enabled using about:flags and enabling the “Show memory usage in hovercards” feature.

Memory Saver and Performance Controls

Memory Saver puts inactive tabs to “sleep” by freezing them, so their memory can be freed up for active tabs. This helps improve performance when you have lots of tabs open.

An example of Memory Saver freeing up memory for other tasks.

With the latest release of Chrome on desktop, we’re introducing two new performance settings so Chrome uses up to 40% and 10GB less memory to keep your tabs running smoothly, and extend your battery when it’s running low.

Memory Saver is part of a suite of Performance Controls that Chrome has added recently, including Energy Saver to extend battery life. All of these features aim to intelligently optimize Chrome’s performance and resource usage based on the user’s system constraints.

Chrome’s Performance Controls (currently Memory Saver and Energy Saver) give users more control over how the browser utilizes their system resources.

Chrome uses signals like tab visibility, whether a tab is playing audio, and page lifecycle events to determine if a tab is inactive. When a tab has been in the background for long enough, Chrome will freeze JavaScript execution and place the tab in a low-memory state.

This helps divert RAM to active foreground tabs and improves performance when you have many tabs open. The tab gets reloaded when it’s brought back into focus.

Measuring Memory Usage

As web applications grow more complex, memory management has become an increasingly important concern. Memory leaks or inefficient usage can cause performance issues or even crashes. Chrome DevTools provides powerful tools for debugging memory problems ? once you know how to use them effectively.

Performance Monitor

The Performance Monitor gives high-level, real-time insight into memory usage with other key metrics like CPU utilization, FPS, and DOM nodes.

Watch for:

Steadily increasing JS Heap or DOM Nodes over time
Spikes in JS Heap after certain user actions

This can indicate a potential memory problem worth investigating further. The Performance Monitor is useful for confirming a suspicion of issues.

Measuring Memory Usage with DevTools

The Memory panel in Chrome DevTools provides extensive insight into a page’s memory consumption. You can snapshot heap allocation, record allocation timelines, and inspect memory usage by component.

The Summary view shows overall memory usage broken down by category like DOM nodes, JS objects, etc. A comparison of multiple snapshots can detect memory leaks.

The Allocations Timeline shows real-time allocation activity during interaction. Spikes may indicate inefficient operations. Filtering to a specific component isolates its impact.

Finally, the Allocation Sampling view maps memory usage to individual page components like documents, frames, web workers, and graphics layers. This reveals the source of any high usage. This combines the detailed snapshot information of the heap profiler with the incremental updating and tracking of the Performance panel.

Tracking objects’ heap allocation usually involves starting a recording, performing a sequence of actions, then stop the recording for analysis.

So DevTools provides a powerful set of tools for understanding the memory characteristics of web apps. It’s invaluable for diagnosing leaks and detecting regressions.

Using Performance APIs

For programmatic memory measurement, the browser API performance.measureUserAgentSpecificMemory() allows measuring total memory usage of a page.

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 aggregated RAM usage of the current page plus all related contexts like iframes and workers. The result includes breakdowns attributing memory usage to specific execution contexts.

This API can be used to collect real user data on memory consumption. Long-term trends may reveal gradual leaks or regressions after site changes.

However, measureUserAgentSpecificMemory() reflects each browser’s internal memory representation. Results vary significantly across browsers. Relative comparisons over time are most meaningful.

Common Causes of Memory Leaks

Many memory leaks in web apps stem from retaining stale references to objects, preventing their cleanup by garbage collection.

Some common sources include:

Forgetting to remove event listeners on DOM detachment
Unintentionally capturing references to DOM elements in closures
Growing data structures like maps or arrays without clearing
Failing to close Web Workers properly
Lingering references between parent and iframe contexts
Closures and unexpected references are a frequent cause. For example, adding a DOM element inside a closure keeps it referenced even if removed from the page later.

Memory leaks tend to be introduced inadvertently and often grow gradually over time. But fixing even small leaks can improve performance.

Profiling memory usage during typical user flows helps identify gradual leak sources. DevTools, fuite , and other tools can pinpoint growing objects. Fixing leaks may require rearchitecting some logic.

Aim for relatively flat memory usage over time, rather than sawtooth patterns showing gradual accumulation between resets. Leaks under 1MB can still be worth fixing if they add up over long sessions.

Conclusion

Chrome’s new hover cards provide useful insight into per-tab memory usage for users. For developers, this feature when combined with DevTools, performance APIs, and careful optimization can help you deliver smoother, memory-efficient web apps that users enjoy.