Memory Hands-On 1

Back

Exercise 1: Memory Monster

Goal: Observe how creating many objects affects memory allocation

Steps:

  1. Take initial snapshot
  2. Click "Feed the Memory Monster" and watch memory grow
  3. Take second snapshot
  4. Click "Put Monster on Diet" to clean up
  5. Take final snapshot and compare all three
  6. Try to find all ways to see the new objects. How many ways did you spot? 🕵️‍♂️
  7. Pro tip: If your computer starts sweating, you're doing it right! 💦
  8. Note: No actual monsters were harmed in this memory experiment 🧟‍♂️
Creates 1000 objects with large arrays, consuming memory
Clears all created objects to free up memory

Exercise 2: The Leaky Party

Goal: Identify memory leaks caused by event listeners

Steps:

  1. Select "Record allocation timeline" in the Memory tab
  2. Click "Start" to begin recording
  3. Start the Party! Let those bytes boogie and watch memory do the disco! 💃🕺
  4. Click "Stop" to analyze the timeline
  5. Look for memory spikes in the timeline and use the timeline selector (blue markers) to analyze each spike individually
  6. Try the same Click "Start Party" multiple times
  7. Take snapshot and look for accumulated event listeners
Creates dancers with setInterval that never gets cleared, causing a memory leak

Exercise 3: The Infinity Loop

Goal: Understand circular references in memory

Steps:

  1. Take an initial memory snapshot as baseline
  2. Click "Create Loop" button to generate circular references
  3. Take a second snapshot and examine:
    • Look for 2 objects that reference each other
    • Find 2 arrays that are part of the circular chain
    • Note the memory size of each component
  4. Click "Break Loop" button to remove references
  5. Take final snapshot to verify cleanup
Creates objects that reference each other in a circular way
Breaks the circular reference by resetting objects

Exercise 4: Memory Linked List

Goal: Learn about linked list memory management and references

Steps:

  1. Take an initial memory snapshot
  2. Click "Create Linked List" button to generate nodes
  3. Take a second snapshot and examine:
    • Find all nodes in the list
    • Look at how nodes connect to each other
    • Note the memory size of each node
  4. Understanding node connections:
    • Find the head node (first in list)
    • Click each 'next' pointer to follow the chain
    • Notice how 'Distance' values change through the chain
  5. Try these experiments:
    • Right-click any node → Store as global variable
    • Break the chain: set node.next = null
    • Run garbage collection
    • Take snapshot - check which nodes remained
  6. Advanced testing:
    • Store a middle node as global variable
    • Clear the head node
    • Check which nodes stay in memory
  7. Click "Clear List" to remove everything
  8. Take final snapshot to verify cleanup
Creates a linked list with multiple connected nodes
Removes all nodes and clears references

Exercise 5: DOM Family Tree

Goal: Learn about DOM element memory management

Steps:

  1. Take an initial memory snapshot before starting
  2. Click "Grow Family Tree" to generate DOM elements
  3. Take a second snapshot and examine:
    • Find newly created DOM elements
    • Note the total size of the DOM tree
  4. Click "Prune Tree" to remove all elements
  5. Take final snapshot to confirm cleanup
  6. Investigate the DOM elements:
    • Look at the "Distance" value - it shows how many references away from GC roots
    • Notice the window icon next to Array objects - indicates global scope
    • Examine why div elements contain document references
  7. Explore element relationships:
    • Select a div element and check the Retainers tab
    • Store an element as global variable (temp1)
    • Use console to explore: temp1.parentElement
    • Try finding other element relationships
  8. Advanced: Try modifying depth and children parameters to see memory impact
Creates a large tree of nested DOM elements
Removes all created DOM elements

📝 Memory Profiling Tips: