rileyjshaw/alpha_compositing_timer.html

## alpha_compositing_timer.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Alpha compositing timer</title>
	<style>
		#container {
			position: relative;
			width: 360px;
			height: 360px;
		}

		a {
			opacity: 0.004;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: #fff;
		}

		a.visited {
			background: #f00;
		}
	</style>
</head>
<body>
	<div id="container"></div>
	<script src="http://cdn.jsdelivr.net/setimmediate/1.0.2/setImmediate.js"></script>
	<script>
		// # links tested per probe
		// higher n = more interesting, could freeze your browser
		var n = 16;

		function repaint (el) {
			var display = el.style.display;
			el.style.display = 'none';
			el.offsetHeight;
			el.style.display = display;
		}

		function populate (numVisited) {
		  var className;
		  for (var i = 0; i < n; i++) {
			className = i < numVisited ? 'visited' : '';
			for (var j = i, _len = n * 256; j < _len; j += n)
			  anchors[j].className = className;
		  }
		}

		function runTimers (numVisited) {
		  var t1;
		  populate (numVisited);
		  repaint(container); // make sure we repaint on every step

		  // could use setAnimationFrame for a tighter painting snapshot
		  t1 = performance.now();
		  setImmediate(function () {
			console.log('Execution with ' + numVisited + ' visited ' +
			  'took ' + (performance.now() - t1) + 'ms, but the ' +
			  'interesting data will be in DevTools > Timeline.');
			if (++numVisited < n) runTimers(numVisited);
		  });
		}

		var container = document.getElementById('container');
		var i = n * 256;
		while (i--) container.appendChild(document.createElement('a'));
		var anchors = container.querySelectorAll('a');

		runTimers(0);
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Alpha compositing timer</title>
	<style>
	#container {
	position: relative;
	width: 360px;
	height: 360px;
	}

	a {
	opacity: 0.004;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	}

	a.visited {
	background: #f00;
	}
	</style>
	</head>
	<body>
	<div id="container"></div>
	<script src="http://cdn.jsdelivr.net/setimmediate/1.0.2/setImmediate.js"></script>
	<script>
	// # links tested per probe
	// higher n = more interesting, could freeze your browser
	var n = 16;

	function repaint (el) {
	var display = el.style.display;
	el.style.display = 'none';
	el.offsetHeight;
	el.style.display = display;
	}

	function populate (numVisited) {
	var className;
	for (var i = 0; i < n; i++) {
	className = i < numVisited ? 'visited' : '';
	for (var j = i, _len = n * 256; j < _len; j += n)
	anchors[j].className = className;
	}
	}

	function runTimers (numVisited) {
	var t1;
	populate (numVisited);
	repaint(container); // make sure we repaint on every step

	// could use setAnimationFrame for a tighter painting snapshot
	t1 = performance.now();
	setImmediate(function () {
	console.log('Execution with ' + numVisited + ' visited ' +
	'took ' + (performance.now() - t1) + 'ms, but the ' +
	'interesting data will be in DevTools > Timeline.');
	if (++numVisited < n) runTimers(numVisited);
	});
	}

	var container = document.getElementById('container');
	var i = n * 256;
	while (i--) container.appendChild(document.createElement('a'));
	var anchors = container.querySelectorAll('a');

	runTimers(0);
	</script>
	</body>
	</html>