Memory Tool 🧠

The Memory tool in DevTools helps you understand memory usage and find memory leaks in your web applications. It provides insights into how memory is allocated and retained, allowing you to optimize your application's performance. (Because nobody wants their app to have the memory of a goldfish! 🐠)

• 🐌 A page's performance gets progressively worse over time. This is possibly a symptom of a memory leak. A memory leak is when a bug in the page causes the page to progressively use more and more memory over time.
• 🐢 A page's performance is consistently bad. This is possibly a symptom of memory bloat. Memory bloat is when a page uses more memory than is necessary for optimal page speed.
• ⏸️ A page's performance is delayed or appears to pause frequently. This is possibly a symptom of frequent garbage collections. Garbage collection is when the browser reclaims memory. The browser decides when this happens. During collections, all script execution is paused. So if the browser is garbage collecting a lot, script execution is going to get paused a lot. (Like a very thorough janitor who keeps stopping you to clean!)

Before we dive in the Memory tool 🤿

OS Task Manager ⚙️

• Open the Task Manager (Ctrl + Shift + Esc).
• Click on the "Processes" tab.
• Look for the process that corresponds to your browser.
• Check the "Memory" column to see how much memory the browser is using.
• Click on the "Memory" column to sort the processes by memory usage.
• Look for any processes that are using an unusually high amount of memory. (If you find your browser eating all your RAM, that's normal! 😅)

Browser Task Manager ⚙️

Open the Browser Task Manager (Shift + Esc)

These two columns tell you different things about how your page is using memory:

• 📊 This column represents the amount of memory that the operating system has reserved for a specific process, including shared and private memory. DOM nodes are stored in OS memory. If this value is increasing, DOM nodes are getting created.
• 💾 The JavaScript Memory column represents the JS heap. This column contains two values. The value you're interested in is the live number (the number in parentheses). The live number represents how much memory the reachable objects on your page are using. The other value is the total allocated memory for this process.

Where are DOM Elements Stored? 🏠

DOM elements are not allocated directly within the JavaScript heap. Instead, they reside in a separate memory space managed by the browser's rendering engine, often referred to as "native memory" or "object graph memory." This distinction arises because DOM elements are not purely JavaScript objects; they are part of the browser's internal representation of the web page.

While DOM elements themselves are not in the JavaScript heap, JavaScript does maintain references to these elements as objects. These references, which act as wrappers around the actual DOM nodes, are stored in the JavaScript heap. This allows JavaScript code to interact with and manipulate DOM elements.

The separation of DOM elements from the JavaScript heap has implications for memory management. The browser's garbage collector is responsible for reclaiming memory occupied by DOM elements that are no longer in use, but this process is separate from the garbage collection of JavaScript objects. Memory leaks can occur if JavaScript code retains references to DOM elements that have been removed from the document, preventing them from being garbage collected by the browser.

Memory Profiling Types in DevTools 📊

When you open the Memory panel in Chrome DevTools, you'll see three different types of memory profiles you can take:

1. Heap Snapshot 📸

A Heap Snapshot provides a detailed view of your page's memory distribution at a specific point in time.

• What it shows: All JavaScript objects and DOM nodes that are being held in memory
• Best for: Identifying memory leaks, finding detached DOM elements
• How to use it: Take snapshots before and after suspected memory-leaking operations, then compare them

2. Allocation Instrumentation on Timeline (Allocation Sampling) ⏱️

This profile records memory allocations over time while performing actions on your page.

• What it shows: Where, when, and how memory is being allocated
• Best for: Understanding memory allocation patterns during specific user interactions
• How to use it: Start recording, perform actions on your page, then stop recording to analyze

3. Allocation Sampling 🧪

This lightweight profiling method samples the JavaScript heap at regular intervals.

• What it shows: Where memory allocation is happening in your JavaScript code
• Best for: Identifying which functions are allocating the most memory
• How to use it: Record while performing an action, then examine the resulting call tree

4. Detached elements

Detached elements are DOM nodes that are no longer attached to the document but still occupy memory. They can lead to memory leaks if references to them are retained in JavaScript.

• What it shows: DOM nodes that are not part of the document but still exist in memory
• Best for: Identifying potential memory leaks caused by detached elements
• How to use it: Use the Heap Snapshot to find and analyze detached elements

When to Use Each Type 🤔

Choose your profiling method based on what you're trying to diagnose:

• For finding memory leaks: Heap Snapshots are your best friend
• For optimizing performance: Allocation Timeline helps identify costly operations
• For quick analysis: Allocation Sampling provides useful data with minimal performance impact

Memory Tool 🔍

📏 Shallow Size

Shallow size is the amount of memory allocated for an object itself, excluding the memory used by objects referenced by it. Think of it as the object's personal space bubble!

📦 Retained Size

Retained size is the total memory size that will be freed when the object is garbage collected. It includes the shallow size of the object and the sizes of all objects that are only accessible through this object.

🗺️ Distance

Distance is a metric that indicates how far an object is from the root of the object graph. The further away it is, the more likely it is to get lost in the heap jungle!

Performance Tool ⚡

The Performance tool in DevTools helps you analyze the performance of your web application. It provides insights into how your application is performing, including CPU usage, memory usage, and network activity. (Like a personal trainer for your app!)

Memory Inspector Tool 🔬

The Memory Inspector tool in DevTools helps you analyze the memory usage of your web application. It provides insights into how memory is allocated and retained, allowing you to optimize your application's performance.