Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
An experiment: does it take longer to alpha composite different colors? Used to automate http://rileyjshaw.com/visited-vectors
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.