Memory Dev Tools

PHOTO EMBED

Sun Jul 24 2022 11:49:03 GMT+0000 (Coordinated Universal Time)

Saved by @Polly #memory #performance #profile #garbage-collection

# A memory leak can occur in your application when an element is no longer attached to the Document Object Model (DOM) tree, but is still referenced by some JavaScript running on the page. These elements are called detached elements.
[https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks]
 
 
 a reference to an object will prevent the object referenced from being garbage collected.
 [https://developer.chrome.com/docs/devtools/memory-problems/memory-101/]
 
 
 # window leaks
 variables set on the window do not get collected
 - windwo.myvar = 'whatever'
 [https://medium.com/coding-blocks/catching-memory-leaks-with-chrome-devtools-57b03acb6bb9]
content_copyCOPY

# Chrome Dev Tools > moor tools > Task Manager > [ GPU memory, JavaScript memory ] - if increasing in size over time = potential memory leak Retaining Tree - two paths (to not be memory) shallow - actual size retained - all object refs collected comparison - object constructor separate heap snap shot containment - memory vs contained - root (object graph) incognito window - plugins get in heap snapshot take snapshot perform work take 2nd snapshot repeat work take 3rd snapshot summary > filter objects allocated between snapshots edge browser task manager memory tab - if increaseing - dom nodes are being created [fix memory problems](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/memory-problems/) Allocation instrumentation on timeline > - blue lines represent new memory allocations = memory leaks