torgeir/profile-with-chrome-devtools-and-improve--improved.html

## profile-with-chrome-devtools-and-improve--improved.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Bad example to debug :D</title>

    <style>
     .colors .colorBlock {
       display: inline-block;
       width: 1em;
       height: 1em;
       float: left;
     }
    </style>
    <script type="text/javascript">

     function decimalToHex(d) {
       var hex = Number(d).toString(16);
       return hex.length < 2 ? "0" + hex : hex;
     }

     function createColoredDiv (red, green, blue) {
       var el = document.createElement("div");
       el.classList.add("colorBlock");
       el.style.backgroundColor = '#' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue);
       return el;
     }

     function makeColorSorter(frequency1, frequency2, frequency3,
                       phase1, phase2, phase3,
                       center, width, len) {

       var fragment = document.createDocumentFragment();

       for (var i = 0; i < len; ++i) {
         var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
         var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
         var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);

         fragment.appendChild(createColoredDiv(red, green, blue));
       }


       document.getElementById('colors').appendChild(fragment);
     }
    </script>
  </head>
  <body id="body">
    <h1>Debug me</h1>
    <button id="clickMe" onclick="makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);">Click me</button>
    <section class="colors" id="colors"></section>

    <a href="https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/">Code example and how to optimize this here</a>
  </body>
</html>

## profile-with-chrome-devtools-and-improve.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    <title>Bad example to debug :D</title>

		<style>
			.colors .colorBlock {
				display: inline-block;
				width: 1em;
				height: 1em;
				float: left;
			}
		</style>
		<script type="text/javascript">
			function decimalToHex(d) {
		    var hex = Number(d).toString(16);
		    hex = "00".substr(0, 2 - hex.length) + hex;

		    console.log('converting ' + d + ' to ' + hex);
		    return hex;
			}

			function makeColorSorter(frequency1, frequency2, frequency3,
                         phase1, phase2, phase3,
                         center, width, len) {
			    for (var i = 0; i < len; ++i)
			    {
			       var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
			       var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
			       var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);

			       console.log('red: ' + decimalToHex(red));
			       console.log('green: ' + decimalToHex(green));
			       console.log('blue: ' + decimalToHex(blue));

			       var div = $('<div class="colorBlock"></div>');
			       div.css('background-color', '#' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue));
			       $('#colors').append(div);
			    }
			}

			function testColorSorter() {
		    makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);
			}
		</script>
	</head>
	<body id="body">
		<h1>Debug me</h1>
		<button id="clickMe" onclick="testColorSorter();">Click me</button>
		<section class="colors" id="colors">

		</section>

		<a href="https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/">Code example and how to optimize this here</a>
		<script
		  src="https://code.jquery.com/jquery-3.2.1.js"
		  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
		  crossorigin="anonymous"></script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Bad example to debug :D</title>

	<style>
	.colors .colorBlock {
	display: inline-block;
	width: 1em;
	height: 1em;
	float: left;
	}
	</style>
	<script type="text/javascript">

	function decimalToHex(d) {
	var hex = Number(d).toString(16);
	return hex.length < 2 ? "0" + hex : hex;
	}

	function createColoredDiv (red, green, blue) {
	var el = document.createElement("div");
	el.classList.add("colorBlock");
	el.style.backgroundColor = '#' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue);
	return el;
	}

	function makeColorSorter(frequency1, frequency2, frequency3,
	phase1, phase2, phase3,
	center, width, len) {

	var fragment = document.createDocumentFragment();

	for (var i = 0; i < len; ++i) {
	var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
	var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
	var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);

	fragment.appendChild(createColoredDiv(red, green, blue));
	}


	document.getElementById('colors').appendChild(fragment);
	}
	</script>
	</head>
	<body id="body">
	<h1>Debug me</h1>
	<button id="clickMe" onclick="makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);">Click me</button>
	<section class="colors" id="colors"></section>

	<a href="https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/">Code example and how to optimize this here</a>
	</body>
	</html>