Your SlideShare is downloading. ×
JAVASCRIPTMEMORYMANAGEMENTANDRES PAGELLA - @mapagella - http://www.andrespagella.comThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT1369.9 MB?! I only have two open tabs!1(and I’m not using flash!)Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTBooleanNumbersStringsObjectsExternal Objects(DOM Nodes, Image Data, etc.)SCALAR VALUESCALAR VA...
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...
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODEThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODE“Retaining Paths”Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODEThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODEThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODEThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODEThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODEFlagged for elimination in next GC collection...
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODEGC.Collect()is triggeredThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODE2 KB4 KB7 KB22 KB11 KB7 KB19 KB7 KB5 KB54 KB ...
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPH19 KB7 KB5 KB19 KB (Total)7 KB+5 KB+7 KB (Itself)Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPH19 KB7 KB5 KB19 KB (Total)7 KB+5 KB+7 KB (Itself)=19 KBThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE ALLOCATIONAVAILABLE MEMORYThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE ALLOCATIONAVAILABLE MEMORY?New object needs morememory in order to beallocatedThu...
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE ALLOCATIONAVAILABLE MEMORY?GC Pause is triggeredThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE ALLOCATIONAVAILABLE MEMORYSeveral milliseconds later...Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE ALLOCATIONGarbage CollectionThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENT“Meh, I don’t care. I’vegot 16 GB of RAM”Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTWell, you should... The GCwill need to go through 16GM of memory checkingfor collectable objec...
JAVASCRIPT MEMORY MANAGEMENTDETECTING AND ELIMINATING LEAKSROOT NODEOBJECT NODESCALAR NODEThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTROOT NODEOBJECT NODESCALAR NODE LeakHidden referenceto object still existsDETECTING AND ELIMIN...
JAVASCRIPT MEMORY MANAGEMENTSPOT THE LEAKvar row = null,	 page = 0;$(#getRow).bind(click, callService);function callServic...
JAVASCRIPT MEMORY MANAGEMENTSPOT THE LEAKvar row = null,	 page = 0;$(#getRow).bind(click, callService);function callServic...
JAVASCRIPT MEMORY MANAGEMENTSPOT THE LEAKvar page = 0,rows = [];$(#getRow).bind(click, callService);function callService()...
JAVASCRIPT MEMORY MANAGEMENTSPOT THE LEAKvar page = 0,rows = [];$(#getRow).bind(click, callService);function callService()...
JAVASCRIPT MEMORY MANAGEMENTDETECTING AND ELIMINATING LEAKSThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTDETECTING AND ELIMINATING LEAKSThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTDETECTING AND ELIMINATING LEAKSThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTDETECTING AND ELIMINATING LEAKS(Remember toRestart the browser)Thursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTDETECTING AND ELIMINATING LEAKSThursday, May 30, 13
JAVASCRIPT MEMORY MANAGEMENTDETECTING AND ELIMINATING LEAKSThursday, May 30, 13
THANK YOU!ANDRES PAGELLA@mapagellahttp://www.andrespagella.comThursday, May 30, 13
Upcoming SlideShare
Loading in...5
×

Memmangementjs

398

Published on

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
398
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Memmangementjs"

  1. 1. JAVASCRIPTMEMORYMANAGEMENTANDRES PAGELLA - @mapagella - http://www.andrespagella.comThursday, May 30, 13
  2. 2. JAVASCRIPT MEMORY MANAGEMENT1369.9 MB?! I only have two open tabs!1(and I’m not using flash!)Thursday, May 30, 13
  3. 3. JAVASCRIPT MEMORY MANAGEMENTBooleanNumbersStringsObjectsExternal Objects(DOM Nodes, Image Data, etc.)SCALAR VALUESCALAR VALUESCALAR VALUEOBJECT VALUEOBJECT VALUEVALUE TYPES IN JSThursday, May 30, 13
  4. 4. 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 TREEThursday, May 30, 13
  5. 5. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODEThursday, May 30, 13
  6. 6. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODE“Retaining Paths”Thursday, May 30, 13
  7. 7. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODEThursday, May 30, 13
  8. 8. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODEThursday, May 30, 13
  9. 9. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODEThursday, May 30, 13
  10. 10. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODEThursday, May 30, 13
  11. 11. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODEFlagged for elimination in next GC collection cycleThursday, May 30, 13
  12. 12. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODEGC.Collect()is triggeredThursday, May 30, 13
  13. 13. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPHROOT NODEOBJECT NODESCALAR NODE2 KB4 KB7 KB22 KB11 KB7 KB19 KB7 KB5 KB54 KB (Total)“Retained Size”Thursday, May 30, 13
  14. 14. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPH19 KB7 KB5 KB19 KB (Total)7 KB+5 KB+7 KB (Itself)Thursday, May 30, 13
  15. 15. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE GRAPH19 KB7 KB5 KB19 KB (Total)7 KB+5 KB+7 KB (Itself)=19 KBThursday, May 30, 13
  16. 16. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE ALLOCATIONAVAILABLE MEMORYThursday, May 30, 13
  17. 17. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE ALLOCATIONAVAILABLE MEMORY?New object needs morememory in order to beallocatedThursday, May 30, 13
  18. 18. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE ALLOCATIONAVAILABLE MEMORY?GC Pause is triggeredThursday, May 30, 13
  19. 19. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE ALLOCATIONAVAILABLE MEMORYSeveral milliseconds later...Thursday, May 30, 13
  20. 20. JAVASCRIPT MEMORY MANAGEMENTMEMORY VALUE ALLOCATIONGarbage CollectionThursday, May 30, 13
  21. 21. JAVASCRIPT MEMORY MANAGEMENT“Meh, I don’t care. I’vegot 16 GB of RAM”Thursday, May 30, 13
  22. 22. JAVASCRIPT MEMORY MANAGEMENTWell, you should... The GCwill need to go through 16GM of memory checkingfor collectable objects...(Good luck with that)Thursday, May 30, 13
  23. 23. JAVASCRIPT MEMORY MANAGEMENTDETECTING AND ELIMINATING LEAKSROOT NODEOBJECT NODESCALAR NODEThursday, May 30, 13
  24. 24. JAVASCRIPT MEMORY MANAGEMENTROOT NODEOBJECT NODESCALAR NODE LeakHidden referenceto object still existsDETECTING AND ELIMINATING LEAKSThursday, May 30, 13
  25. 25. JAVASCRIPT MEMORY MANAGEMENTSPOT THE LEAKvar 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
  26. 26. JAVASCRIPT MEMORY MANAGEMENTSPOT THE LEAKvar 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
  27. 27. JAVASCRIPT MEMORY MANAGEMENTSPOT THE LEAKvar 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
  28. 28. JAVASCRIPT MEMORY MANAGEMENTSPOT THE LEAKvar 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
  29. 29. JAVASCRIPT MEMORY MANAGEMENTDETECTING AND ELIMINATING LEAKSThursday, May 30, 13
  30. 30. JAVASCRIPT MEMORY MANAGEMENTDETECTING AND ELIMINATING LEAKSThursday, May 30, 13
  31. 31. JAVASCRIPT MEMORY MANAGEMENTDETECTING AND ELIMINATING LEAKSThursday, May 30, 13
  32. 32. JAVASCRIPT MEMORY MANAGEMENTDETECTING AND ELIMINATING LEAKS(Remember toRestart the browser)Thursday, May 30, 13
  33. 33. JAVASCRIPT MEMORY MANAGEMENTDETECTING AND ELIMINATING LEAKSThursday, May 30, 13
  34. 34. JAVASCRIPT MEMORY MANAGEMENTDETECTING AND ELIMINATING LEAKSThursday, May 30, 13
  35. 35. THANK YOU!ANDRES PAGELLA@mapagellahttp://www.andrespagella.comThursday, May 30, 13

×