sayar/memory_leak.html

## memory_leak.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Memory Leak</title>
	<meta name="author" content="@ramisayar">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="container">
		<h1>Generate Memory Leaks</h1>
		<p>By <a href="https://twitter.com/ramisayar">@ramisayar</a>.</p>
		<p>The following code will generate a memory leak in all browsers today. It is specific to jQuery. It is near impossible to figure out without debugging and introspection tools. Sample from <a href="http://javascript.info/tutorial/memory-leaks">here</a>.</p>

		<div id="data"></div>
<pre class="prettyprint languague-js">
function go() {
	$('&lt;div/&gt;')
		.html(new Array(100000).join('text')) // div with a text, maybe AJAX-loaded
		.click(function() { })
		.appendTo('#data');
	document.getElementById('data').innerHTML = '';
}
</pre>
		<p>"The leak happens because elem is removed by cleaning parent innerHTML, but the data remains in jQuery.cache. More importantly, the event handler references elem, so both handler and elem stay in memory with the whole closure." from <a href="http://javascript.info/tutorial/memory-leaks">JavaScript Info</a>.</p>
		<button id="run_memory_link" class="btn btn-default">Run 1000 Times</button>

	</div>

	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha256-Sk3nkD6mLTMOF0EOpNtsIry+s1CsaqQC1rVLTAy+0yc= sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
	<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
	<script type="text/javascript">
		$(function(){
			function go() {
				for(var i = 0; i != 1000; i++){
					$('<div/>')
						.html(new Array(100000).join('text')) // div with a text, maybe AJAX-loaded
						.click(function() { })
						.appendTo('#data');
					document.getElementById('data').innerHTML = '';
				}
			}
			$("#run_memory_link").click(go);
		})
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Memory Leak</title>
	<meta name="author" content="@ramisayar">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	</head>

	<body>
	<div class="container">
	<h1>Generate Memory Leaks</h1>
	<p>By <a href="https://twitter.com/ramisayar">@ramisayar</a>.</p>
	<p>The following code will generate a memory leak in all browsers today. It is specific to jQuery. It is near impossible to figure out without debugging and introspection tools. Sample from <a href="http://javascript.info/tutorial/memory-leaks">here</a>.</p>

	<div id="data"></div>
	<pre class="prettyprint languague-js">
	function go() {
	$('<div/>')
	.html(new Array(100000).join('text')) // div with a text, maybe AJAX-loaded
	.click(function() { })
	.appendTo('#data');
	document.getElementById('data').innerHTML = '';
	}
	</pre>
	<p>"The leak happens because elem is removed by cleaning parent innerHTML, but the data remains in jQuery.cache. More importantly, the event handler references elem, so both handler and elem stay in memory with the whole closure." from <a href="http://javascript.info/tutorial/memory-leaks">JavaScript Info</a>.</p>
	<button id="run_memory_link" class="btn btn-default">Run 1000 Times</button>

	</div>

	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha256-Sk3nkD6mLTMOF0EOpNtsIry+s1CsaqQC1rVLTAy+0yc= sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
	<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
	<script type="text/javascript">
	$(function(){
	function go() {
	for(var i = 0; i != 1000; i++){
	$('<div/>')
	.html(new Array(100000).join('text')) // div with a text, maybe AJAX-loaded
	.click(function() { })
	.appendTo('#data');
	document.getElementById('data').innerHTML = '';
	}
	}
	$("#run_memory_link").click(go);
	})
	</script>
	</body>
	</html>