forked from warsawjs/meetup-slides-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo.html
148 lines (119 loc) · 3.49 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Memory leaks demo</title>
</head>
<body>
<input type="button" id="ml-global" value="Global">
<input type="button" id="ml-interval" value="Interval">
<input type="button" id="ml-intermediate" value="Intermediate">
<input type="button" id="ml-forgotten-dom" value="Forgotten DOM">
<input type="button" id="ml-closures" value="Closures">
<input type="button" id="ml-detached-nodes" value="Detached nodes">
<input type="button" id="ml-console" value="Console">
<br>
<br>
<div id="a-div">I'm a div</div>
<script type="application/javascript">
class BigObject {
constructor() {
this.data = Array( 100000 ).map( () => 'x' );
}
}
document.getElementById( 'ml-global' ).addEventListener( 'click', () => {
// window.bo = new BigObject();
// bo = new BigObject();
this.bo = new BigObject(); // this === window
} );
</script>
<script type="application/javascript">
document.getElementById( 'ml-interval' ).addEventListener( 'click', () => {
const bo = new BigObject();
setInterval( () => {
console.log( bo[ 3 ] );
}, 500 );
} );
</script>
<script type="application/javascript">
document.getElementById( 'ml-intermediate' ).addEventListener( 'click', () => {
const config = {
bo: new BigObject(),
foo: 'bar',
interval: 1000
};
logSomething( config );
// logSomethingBetter( config.foo, config.interval );
// Also OK:
// const { foo, interval } = config;
// logSomething( { foo, interval } );
// logSomethingOKish( config );
} );
function logSomething( config ) {
setInterval( () => {
console.log( config.foo );
}, 1000 );
}
function logSomethingBetter( foo, interval ) {
setInterval( () => {
console.log( foo );
}, interval );
}
function logSomethingOKish( { foo, interval } ) {
setInterval( () => {
console.log( foo );
}, interval );
}
</script>
<script type="application/javascript">
const myStuff = {};
document.getElementById( 'ml-forgotten-dom' ).addEventListener( 'click', () => {
const button = document.createElement( 'input' );
button.id = 'click-me';
button.type = 'button';
button.value = 'click me!';
button._bo = new BigObject();
myStuff.button = button;
document.body.appendChild( button );
button.addEventListener( 'click', removeButton );
function removeButton() {
document.body.removeChild( document.getElementById( 'click-me' ) );
button.removeEventListener( 'click', removeButton );
}
} );
</script>
<script type="application/javascript">
let theThing = null;
function replaceThing() {
const originalThing = theThing;
function unused() {
// This... is never used but scopes...
if ( originalThing ) {
console.log( 'Hello there!' );
}
}
theThing = {
bo: new BigObject(),
someMethod: function() {
// Does not use originalThing could be GCed but unused is using and as both useses the same lexical scope... bang
console.log( 'Some method...' );
}
};
}
document.getElementById( 'ml-closures' ).addEventListener( 'click', replaceThing );
</script>
<script type="application/javascript">
const node = document.getElementById( 'a-div' );
function detachNode() {
node.remove();
}
document.getElementById( 'ml-detached-nodes' ).addEventListener( 'click', detachNode );
</script>
<script type="application/javascript">
document.getElementById( 'ml-console' ).addEventListener( 'click', () => {
const bo = new BigObject();
console.log( bo );
} );
</script>
</body>
</html>