Files
iD/test/bench/event-binding-cost.html
2016-08-21 15:19:27 -04:00

63 lines
1.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Event binding cost</title>
<style>
#frame {
width:100px;
height:100px;
background:black;
}
.dot {
height:100px;
width:100px;
color:blue;
}
pre {
position:absolute;
top:120px;
width:500px;
}
</style>
</head>
<body>
<div id='frame'>
</div>
<pre id='report'></pre>
<script src="https://raw.github.com/bestiejs/benchmark.js/v1.0.0/benchmark.js"></script>
<script>
var suite = new Benchmark.Suite;
// add tests
suite
.add('with events', function() {
d3.select('#frame').html('')
.append('div')
.attr({ 'class': 'dot' })
.on('click', function() {});
})
.add('without events', function() {
d3.select('#frame').html('')
.append('div')
.attr({ 'class': 'dot' });
})
.add('using remove', function() {
d3.select('.dot').remove();
d3.select('#frame')
.append('div')
.attr({ 'class': 'dot' })
.on('click', function() {});
})
// add listeners
.on('cycle', function(event) {
document.getElementById('report').innerHTML +=
String(event.target) + '\n';
})
.on('complete', function() {
document.getElementById('report').innerHTML +=
'Fastest is ' + this.filter('fastest').pluck('name') + '\n';
})
// run async
.run({ 'async': true });
</script>
</body>