Last active
May 15, 2018 18:54
-
-
Save nolanlawson/ba957ca84a7a4da4020c0401540162ca to your computer and use it in GitHub Desktop.
Memory leak demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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