Memory. don t forget to take out the

Size: px

Start display at page:

Download "Memory. don t forget to take out the"

Chastity Richards
5 years ago
Views:

1 Memory don t forget to take out the garbage

3 find me on twitter

4 find me on twitter content warnings cw: large animation

8 the programmer never needs to worry about deallocation

9 1. what is memory?

10 colossus

11 ram

12 heaps

13 heaps

14 allocation

15 allocation

16 deallocation

17 deallocation

18 += allocation ^= *= <<= -= = var variable = value' >>= &= **= /= >>>= %=

19 += allocation ^= *= <<= -= = var variable = value' >>= &= **= /= >>>= %=

20 += allocation <<= ^= *= -= = var variable = value' >>= &= **= /= >>>= %=

21 += allocation ^= *= assigns a value <<= -= from the right = var variable = value' >>= &= **= /= >>>= %=

22 allocation assigns a value from the right var variable = value' to a memory address on the left

23 deallocation function () { var a = 1 function () { var b = 2 } }

24 deallocation function () { var a = 1 a: 1 function () { var b = 2 a: 1, b: 2 } }

25 deallocation function () { var a = 1 a: 1 function () { var b = 2 a: 1, b: 2 function () { var c = a + b a: 1, b: 2, c: 3 } } }

26 deallocation function () { var a = 1 a: 1 function () { var b = 2 a: 1, b: 2 function () { var c = a + b a: 1, b: 2, c: 3 } } }

27 deallocation function () { var a = 1 a: 1 function () { var b = 2 a: 1, b: 2 function () { var c = a + b a: 1, b: 2, c: 3 } } }

28 deallocation function () { var a = 1 function () { var b = 2 function () { var c = a + b } } }

29 deallocation function () { var a = 1 function () { var b = 2 function () { var c = a + b variables are retained as long as their parent scope exists } } }

30 deallocation var functionscopedvariable let blockscopedvariable const blockscopedconstant globalvariable = '...'

31 deallocation var functionscopedvariable let blockscopedvariable const blockscopedconstant globalvariable = '...'

32 2. garbage collection

33 int *array = malloc(10 * sizeof(int));

34 int *array = malloc(10 * sizeof(int)); free(array);

35 garbage collector

37 young generation

38 young generation old generation

39 young generation old generation

40 young generation old generation

41 young generation old generation

46 alive data dead data

47 alive data dead data

49 young generation old generation

50 young generation old generation

51 young generation old generation

52 young generation old generation

53 young generation old generation

54 young generation old generation

55 young generation old generation

56 young generation old generation

57 young generation old generation

59 marking

60 marking

61 sweeping

62 sweeping

63 compacting

64 compacting

65 performance caveats tracing and marking pauses your application

66 performance caveats tracing and marking pauses your application

67 performance caveats tracing and marking pauses your application

68 performance caveats sweeping occurs in the background unless sweepers fall behind

69 2.5. webassembly

70 a way of running languages other than javascript in your web pages

71 a way of running languages other than javascript in your web pages

72 a way of running languages other than javascript in your web pages

73 webassembly instances own their own memory cw: large animation

74 webassembly instances own their own memory cw: large animation

75 a cartoon intro to webassembly lin clarke jsconf eu 2017

76 a cartoon intro to webassembly lin clarke jsconf eu 2017

77 3. memory bloat and memory leaks

78 knowing you have a problem

79 knowing you have a problem

80 knowing you have a problem

81 memory bloat: making websites unnecessarily large for their purpose

84 baseline 160 megabytes 3.5k js

85 the verge 500 megabytes 100k js

86 memory leaks: when unused data is not freed (or tricking the GC that dead data is alive) cw: large animation

87 your data cw: large animation

88 your data cw: large animation

89 you

90 you

94 accidental globals function repeat() { results = [] for (var index = 0; index < ; index++) { results.push({index}) } } accidental global variables keep data alive

95 accidental globals function repeat() { var results = [] for (var index = 0; index < ; index++) { results.push({index}) } take extra care } when scoping variables

96 accidental globals scoping variables allows memory to be reclaimed

97 accidental globals scoping variables allows memory to be reclaimed

98 forgotten timers function starttimer() { var results = [] return setinterval(() => { console.log('tick') don t forget to clear timers results.push(makelargestring()) }, 1000) }

99 forgotten timers timers keep data in their scope chains alive

100 forgotten timers timers keep data in their scope chains alive

101 forgotten timers timers keep data in their scope chains alive

102 forgotten timers timers keep data in their scope chains alive

103 forgotten event listeners function createbutton() { var strings = [] var button = document.createelement('input') button.value = "Create large string" button.type = "button" button.onclick = () => { strings.push(makelargestring()) } document.body.appendchild(button) }

104 forgotten event listeners removing event listeners frees up memory

105 forgotten event listeners removing event listeners frees up memory

106 detached dom nodes var buttons = new Array(100000).fill('').map(() => document.createelement('input')) dom nodes that are not attached to the dom tree are practically useless

107

108

109 summary memory is a finite resource

110 summary javascript manages memory on our behalf

111 summary the garbage collector frees memory not being used

112 summary memory bloat: websites unnecessarily large for their purpose

113 summary memory leaks: when unused memory is not freed

114 summary use browser devtools to confirm problems

115 special edition seaside wombat stickers

116 thank you special for technical check

117 thank you special for technical check

Contents. 8-1 Copyright (c) N. Afshartous

Contents. 8-1 Copyright (c) N. Afshartous Contents 1. Introduction 2. Types and Variables 3. Statements and Control Flow 4. Reading Input 5. Classes and Objects 6. Arrays 7. Methods 8. Scope and Lifetime 9. Utility classes 10 Introduction to Object-Oriented