Analyzing the JavaScript Heap and Detecting Memory Leaks - Conf42 JavaScript 2023

Explore techniques for analyzing the JavaScript heap and detecting memory leaks in this conference talk from Conf42 JavaScript 2023. Dive into memory consumption concepts, including immutability, DOM nodes, and composition layers. Learn to inspect DOM and JavaScript memory, understand the memory heap, and examine object sizes. Follow along with practical demonstrations and discover common causes of memory leaks, such as console.log usage, global variables, leftover callbacks, and DOM references. Master methods for detecting memory leaks, including proper garbage collection triggering and in-depth analysis using detached elements tools. Gain valuable insights to optimize JavaScript performance and prevent memory-related issues in your applications.

Syllabus

intro
preamble
about julian
memory consumption, what consumes memory?
immutability
dom nodes
composition layers
inspect dom & javascript memory
birdseye view
memory heap
object sizes
inspect dom & javascript memory
demo 1
what consumes memory
composition layers
layer inspection
demo 2
memory leaks
console.log
global variables
left over callbacks / subscriptions
dom references
how to detect memory leaks?
detect memory leaks
don't forget to trigger GC
in-depth analysis - detect memory leaks
detached elements tools
demo 3
thanks for your time!