Memmangementjs

  • 341 views
Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
341
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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