SlideShare a Scribd company logo

Memmangementjs

•
•
Andres Pagella
Andres Pagella

The document discusses JavaScript memory management and garbage collection. It covers the different value types in JavaScript like booleans, numbers, strings, objects and external objects. It explains how memory is allocated to the DOM tree and value graph. The garbage collection process and how unused memory is freed is described. Examples of memory leaks are provided and how to detect and eliminate leaks. Strategies for efficient memory management are suggested.

1 of 35
JAVASCRIPT MEMORY MANAGEMENT ANDRES PAGELLA - @mapagella - http://www.andrespagella.com Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT 1369.9 MB?! I only have two open tabs! 1 (and I’m not using flash!) Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT Boolean Numbers Strings Objects External Objects (DOM Nodes, Image Data, etc.) SCALAR VALUE SCALAR VALUE SCALAR VALUE OBJECT VALUE OBJECT VALUE VALUE TYPES IN JS Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT <body> <div class=”one”> <p>One</p> <p>Two</p> <p>Three</p> </div> <div class=”two”> <p>One</p> <p>Two</p> <p>Three</p> </div> </body> DOCUMENT OBJECT MODEL TREE Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE GRAPH ROOT NODE OBJECT NODE SCALAR NODE Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE GRAPH ROOT NODE OBJECT NODE SCALAR NODE “Retaining Paths” Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE GRAPH ROOT NODE OBJECT NODE SCALAR NODE Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE GRAPH ROOT NODE OBJECT NODE SCALAR NODE Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE GRAPH ROOT NODE OBJECT NODE SCALAR NODE Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE GRAPH ROOT NODE OBJECT NODE SCALAR NODE Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE GRAPH ROOT NODE OBJECT NODE SCALAR NODE Flagged for elimination in next GC collection cycle Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE GRAPH ROOT NODE OBJECT NODE SCALAR NODE GC.Collect() is triggered Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE GRAPH ROOT NODE OBJECT NODE SCALAR NODE 2 KB 4 KB 7 KB 22 KB 11 KB 7 KB19 KB 7 KB 5 KB 54 KB (Total) “Retained Size” Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE GRAPH 19 KB 7 KB 5 KB 19 KB (Total) 7 KB + 5 KB + 7 KB (Itself) Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE GRAPH 19 KB 7 KB 5 KB 19 KB (Total) 7 KB + 5 KB + 7 KB (Itself) = 19 KB Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE ALLOCATION AVAILABLE MEMORY Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE ALLOCATION AVAILABLE MEMORY ? New object needs more memory in order to be allocated Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE ALLOCATION AVAILABLE MEMORY ? GC Pause is triggered Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE ALLOCATION AVAILABLE MEMORY Several milliseconds later... Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT MEMORY VALUE ALLOCATION Garbage Collection Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT “Meh, I don’t care. I’ve got 16 GB of RAM” Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT Well, you should... The GC will need to go through 16 GM of memory checking for collectable objects... (Good luck with that) Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT DETECTING AND ELIMINATING LEAKS ROOT NODE OBJECT NODE SCALAR NODE Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT ROOT NODE OBJECT NODE SCALAR NODE Leak Hidden reference to object still exists DETECTING AND ELIMINATING LEAKS Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT SPOT THE LEAK var row = null, page = 0; $('#getRow').bind('click', callService); function callService() { var params = { pageNum: (page + 1) }; page++; $.get('services/rest/getRow', params, function(data) { row += data; $('#grid').html(row); }); } Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT SPOT THE LEAK var row = null, page = 0; $('#getRow').bind('click', callService); function callService() { var params = { pageNum: (page + 1) }; page++; $.get('services/rest/getRow', params, function(data) { row += data; $('#grid').html(row); }); } Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT SPOT THE LEAK var page = 0, rows = []; $('#getRow').bind('click', callService); function callService() { var params = { pageNum: (page + 1) }; page++; $.get('services/rest/getRow', params, function(data) { rows.push(data); }); } Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT SPOT THE LEAK var page = 0, rows = []; $('#getRow').bind('click', callService); function callService() { var params = { pageNum: (page + 1) }; page++; $.get('services/rest/getRow', params, function(data) { rows.push(data); }); } Arrays are unbound objects! Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT DETECTING AND ELIMINATING LEAKS Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT DETECTING AND ELIMINATING LEAKS Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT DETECTING AND ELIMINATING LEAKS Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT DETECTING AND ELIMINATING LEAKS (Remember to Restart the browser) Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT DETECTING AND ELIMINATING LEAKS Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT DETECTING AND ELIMINATING LEAKS Thursday, May 30, 13
THANK YOU! ANDRES PAGELLA @mapagella http://www.andrespagella.com Thursday, May 30, 13

More Related Content

Memmangementjs