A presentation packed with useful information about garbage collection algorithms, JavaScript memory allocation as well as V8's approach to garbage collection.

1. There's garbage
in our code
Talks by Softbinator
Adrian Oprea / @opreaadrian

2. I am
• Software over-engineer
• Deprived of sleep
• In love with JavaScript
• Docker fanboy :)

3. MEMORY
MANAGEMENT

4. IN THEORY...

5. THE ACT OF MANAGING
MEMORY AT THE SYSTEM LEVEL

6. DYNAMIC ALLOCATION / DE-
ALLOCATION

7. MEMORY IS FREED FOR REUSE
WHEN NO LONGER NEEDED

8. IN THE WILD...

9. ALL HIGH-LEVEL PROGRAMMING LANGUAGES IMPLEMENT
SOME FORM OF AUTOMATIC MEMORY MANAGEMENT

10. AUTOMATIC

11. JAVA JAVASCRIPT .NET C++
GARBAGE COLLECTOR

12. MEMORY MANAGEMENT
IN JAVASCRIPT

13. JAVASCRIPT

14. THE WORLD'S MOST
MISUNDERSTOOD
PROGRAMMING
LANGUAGE

15. MEMORY
• Is allocated at runtime
• Is freed whenever a certain threshold is reached

16. THE GARBAGE COLLECTOR
KICKS IN WHEN YOU LEAST
EXPECT

17. GC PAUSE...

18. PROBLEM #1

19. YOU HAVE
NO CONTROL
OVER THE
COLLECTION
PROCESS

20. PROBLEM #2

21. GARBAGE.
COLLECTION.
IS.
VERY.
EXPENSIVE.

22. BORED? LET'S LOOK AT 3 LINES
OF CODE

24. SNIFFLES

25. GARBAGE
COLLECTION
ALGORITHMS

26. REFERENCE
COUNTING
REFERENCE
COUNTING

27. REFERENCE
COUNTING
AVAILABLE IN PREVIOUS GENERATION BROWSERS
(IE8 and below)

28. REFERENCE
COUNTING
AN OBJECT IS ELIGIBLE FOR COLLECTION IF THERE ARE 0
REFERENCES POINTING TO IT

29. REFERENCE
COUNTING
THIS IS A NAIVE IMPLEMENTATION.

30. MARK AND SWEEP

31. REFERENCE
COUNTING
SHIPS WITH ALL MODERN BROWSERS, SINCE 2012

32. REFERENCE
COUNTING
HAS NO ISSUE COLLECTING CIRCULAR
DEPENDENCIES(CYCLES)

33. REFERENCE
COUNTING
INTRODUCES THE NOTION OF ROOT OBJECTS

35. WHERE IS THE GARBAGE?

37. GARBAGE
COLLECTION
IN V8

38. WHAT IS V8?
JAVASCRIPT
VIRTUAL MACHINE NODE.JS
GOOGLE'S THE MONSTER
BEHIND
FASTEST JAVASCRIPTMAINSTREAM
VIRTUAL MACHINE

39. GENERATIONAL GARBAGE
COLLECTOR

40. GENERATIONAL WHAT?

41. Old
7 %
Young
93 %
MORTALITY RATE

42. V8 SPLITS OBJECTS IN TWO
GENERATIONS

43. YOUNG GENERATION...

44. "FROM" and "TO" spaces

45. FAST ALLOCATION

46. FAST COLLECTION
~10ms

47. COLLECTION
OCURRS
WHEN
THE TO
SPACE IS FULL

49. OLD GENERATION

50. COLLECTION OCURRS RARELY

51. BIGGER IMPACT
ON PERFORMANCE

52. IMPLICITLY TRIGGERS A
YOUNG GENERATION
COLLECTION

53. FULL COLLECTION

54. USES A MARK-COPMACT
ALGORITHM

55. REACHABLE
OBJECTS
ARE MARKED

56. MARKED OBJECTS
GET MOVED TO
THE START OF THE
HEAP - COPMACT

57. REWIRING OBJECT
REFERENCES IS COSTLY

59. GARBAGE
COLLECTION
OPTIMISATIONS
IN V8

61. IDENTIFYING LEAKS

62. EVIL DOM
var detached = null;
function fill() {
for (var i = 0; i < 25; ++i) {
var div = document.createElement('div');
div.data = new Array(10000);
for (var j = 0, l = div.data.length; j < l; ++j)
div.data[j] = j.toString();
detached.appendChild(div);
}
}
function start() {
var p = document.getElementById("p");
detached = document.createElement("div");
p.appendChild(detached);
p.removeChild(detached);
fill();
}
start();

63. BETTER DOM
var detached = null;
function fill() {
do stuff ...
}
function start() {
var p = document.getElementById("p");
detached = document.createElement("div");
p.appendChild(detached);
p.removeChild(detached);
// solution: EXPLICITLY SET TO NULL
detached = null;
fill();
}
start();

64. EVIL XHR
function getText(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
callback(xhr.responseText);
}
xhr.open('get', url, true);
xhr.send(null);
}

65. BETTER XHR
function getText(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
callback(xhr.responseText);
xhr = null;
}
xhr.open('get', url, true);
xhr.send(null);
}

66. EVIL CLOSURES
// catalogData is a large object
function getActiveItems(catalogData) {
var activeItems = processCatalogData(catalogData);
function getItem(idx) {
return activeItems[idx];
}
return getItem;
}

67. BETTER CLOSURES
// catalogData is a large object
function getActiveItems(catalogData) {
var activeItems = processCatalogData(catalogData);
function getItem(idx) {
return activeItems[idx];
}
catalogData = null;
return getItem;
}

68. CLOSING THOUGHTS

69. USE WHAT YOU DECLARE

70. ASSIGN TO null

71. USE THE delete OPERATOR

72. USE OBJECT POOLS

73. USE SOME DEVELOPER TOOLS!

75. QUESTIONS
Adrian Oprea / @opreaadrian / codesi.nz