Skip to content

Instantly share code, notes, and snippets.

@nolanlawson
Last active May 15, 2018 18:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nolanlawson/ba957ca84a7a4da4020c0401540162ca to your computer and use it in GitHub Desktop.
Save nolanlawson/ba957ca84a7a4da4020c0401540162ca to your computer and use it in GitHub Desktop.
Memory leak demo
<!doctype html>
<html lang="en">
<head>
<title>Memory leak demo</title>
<style>
body {
max-width: 600px;
margin: 0 auto;
padding: 40px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
button {
font-size: 18px;
padding: 5px;
}
pre {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Memory leak demo</h1>
<button id="leakJSButton" type="button">Leak JS memory</button>
<button id="leakDOMButton" type="button">Leak DOM memory</button>
<pre id="display"></pre>
<script src="main.js"></script>
</body>
</html>
(function () {
'use strict'
var $ = document.querySelector.bind(document)
var $leakJSButton = $('#leakJSButton')
var $leakDOMButton = $('#leakDOMButton')
var $display = $('#display')
var leakyJS = {}
var leakyDOM = document.createElement('div')
var leakyJSCount = 0
var leakyDOMCount = 0
function createBigString () {
var str = ''
for (var i = 0; i < 1000; i++) {
str += btoa(Math.random())
}
return str
}
function leakJS () {
display.innerHTML = 'Leaking JS...\nCurrent size: ' + (++leakyJSCount)
performance.mark('leakJS start')
var key = createBigString()
var value = createBigString()
leakyJS[key] = value
performance.mark('leakJS end')
setTimeout(leakJS, 100)
}
function leakDOM () {
display.innerHTML = 'Leaking DOM...\nCurrent size: ' + (++leakyDOMCount)
performance.mark('leakDOM start')
var id = createBigString()
var clazz = createBigString()
var div = document.createElement('div')
div.setAttribute('id', id)
div.setAttribute('class', clazz)
leakyDOM.appendChild(div)
performance.mark('leakDOM end')
setTimeout(leakDOM, 100)
}
$leakJSButton.addEventListener('click', function () {
$leakJSButton.setAttribute('disabled', true)
$leakDOMButton.setAttribute('disabled', true)
leakJS()
})
$leakDOMButton.addEventListener('click', function () {
$leakJSButton.setAttribute('disabled', true)
$leakDOMButton.setAttribute('disabled', true)
leakDOM()
})
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment