mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 01:02:58 +00:00
Add benches, more notes
This commit is contained in:
Tom MacWright
13
NOTES.md
13
NOTES.md
@@ -2,7 +2,7 @@
|
||||
|
||||
* [CORS](http://caniuse.com/#feat=cors)
|
||||
* [SVG](http://caniuse.com/#feat=svg)
|
||||
* [CSS 3D Transforms](http://caniuse.com/#feat=transforms3d): No IE9
|
||||
* [CSS 3D Transforms](http://caniuse.com/#feat=transforms3d): No IE9, No Opera
|
||||
* [localStorage](http://caniuse.com/#feat=namevalue-storage)
|
||||
* [hashchange event](http://caniuse.com/#feat=hashchange)
|
||||
|
||||
@@ -171,6 +171,17 @@ better performance than using them with SVG elements. For this reason, iD
|
||||
transforms a map-container element rather than a `g` element on panning
|
||||
movements.
|
||||
|
||||
### Transforms in browsers
|
||||
|
||||
Matrix transforms are significantly slower than `translate` in webkit but
|
||||
nearly equivalent in Firefox. Chrome is about 4x faster than Firefox with
|
||||
transforms.
|
||||
|
||||
However, matrix transforms can also represent scale, and so they should be compared
|
||||
with transform + scale. If you add an identity scale (`scale(1, 1)`), then
|
||||
matrix and `translate scale` performance is similar in Chrome, though matrix
|
||||
still lags significantly in Safari and Firefox.
|
||||
|
||||
## SVG point rounding performance
|
||||
|
||||
Rounding points in SVG gives a ~20% speedup.
|
||||
|
||||
3919
test/bench/benchmark.js
Normal file
3919
test/bench/benchmark.js
Normal file
File diff suppressed because it is too large
Load Diff
63
test/bench/event-binding-cost.html
Normal file
63
test/bench/event-binding-cost.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!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="http://d3js.org/d3.v3.min.js"></script>
|
||||
<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>
|
||||
56
test/bench/removing.html
Normal file
56
test/bench/removing.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!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="http://d3js.org/d3.v3.min.js"></script>
|
||||
<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('#html', function() {
|
||||
d3.select('#frame').html('')
|
||||
.append('div')
|
||||
.attr({ 'class': 'dot' });
|
||||
})
|
||||
.add('#remove', function() {
|
||||
d3.select('.dot').remove();
|
||||
d3.select('#frame')
|
||||
.append('div')
|
||||
.attr({ 'class': 'dot' });
|
||||
})
|
||||
// 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>
|
||||
61
test/bench/translate-rounding.html
Normal file
61
test/bench/translate-rounding.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Rounded coordinates</title>
|
||||
<style>
|
||||
#mover {
|
||||
width:10px;
|
||||
height:10px;
|
||||
background:black;
|
||||
}
|
||||
#moved {
|
||||
width:5px;
|
||||
height:5px;
|
||||
background:red;
|
||||
}
|
||||
pre {
|
||||
position:absolute;
|
||||
top:120px;
|
||||
width:500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='mover'>
|
||||
<div id='moved'></div>
|
||||
</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('translate', function() {
|
||||
document.getElementById('mover').style.webkitTransform = 'translate(' +
|
||||
(Math.random() * 100) + 'px,' + (Math.random() * 100) + 'px)';
|
||||
})
|
||||
.add('translate-rounded', function() {
|
||||
document.getElementById('mover').style.webkitTransform = 'translate(' +
|
||||
(~~(Math.random() * 100)) + 'px,' + (~~(Math.random() * 100)) + 'px)';
|
||||
})
|
||||
.add('translate3d', function() {
|
||||
document.getElementById('mover').style.webkitTransform = 'translate3d(' +
|
||||
((Math.random() * 100)) + 'px,' + ((Math.random() * 100)) + 'px, 0px)';
|
||||
})
|
||||
.add('translate3d-rounded', function() {
|
||||
document.getElementById('mover').style.webkitTransform = 'translate3d(' +
|
||||
(~~(Math.random() * 100)) + 'px,' + (~~(Math.random() * 100)) + 'px, 0px)';
|
||||
})
|
||||
// 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>
|
||||
75
test/bench/translate-vs-matrix-webkit.html
Normal file
75
test/bench/translate-vs-matrix-webkit.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Rounded coordinates</title>
|
||||
<style>
|
||||
#mover {
|
||||
width:10px;
|
||||
height:10px;
|
||||
background:black;
|
||||
}
|
||||
#moved {
|
||||
width:5px;
|
||||
height:5px;
|
||||
background:red;
|
||||
}
|
||||
pre {
|
||||
position:absolute;
|
||||
top:220px;
|
||||
width:500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='mover'>
|
||||
<div id='moved'></div>
|
||||
</div>
|
||||
<pre id='report'></pre>
|
||||
<script src="benchmark.js"></script>
|
||||
<script>
|
||||
var suite = new Benchmark.Suite;
|
||||
// add tests
|
||||
suite
|
||||
.add('translate', function() {
|
||||
document.getElementById('mover').style.webkitTransform = 'translate(' +
|
||||
~~(Math.random() * 200) + 'px,' + ~~(Math.random() * 200) + 'px)';
|
||||
})
|
||||
.add('translate3d', function() {
|
||||
document.getElementById('mover').style.webkitTransform = 'translate3d(' +
|
||||
~~((Math.random() * 200)) + 'px,' + ~~((Math.random() * 200)) + 'px, 0px)';
|
||||
})
|
||||
.add('translate + scale', function() {
|
||||
document.getElementById('mover').style.webkitTransform = 'translate(' +
|
||||
~~(Math.random() * 200) + 'px,' + ~~(Math.random() * 200) + 'px) scale(1, 1)';
|
||||
})
|
||||
.add('translate3d + scale', function() {
|
||||
document.getElementById('mover').style.webkitTransform = 'translate3d(' +
|
||||
~~((Math.random() * 200)) + 'px,' + ~~((Math.random() * 200)) + 'px, 0px) scale(1, 1)';
|
||||
})
|
||||
.add('matrix3d', function() {
|
||||
document.getElementById('mover').style.webkitTransform = 'matrix3d(' +
|
||||
[1,0,0,0,
|
||||
0,1,0,0,
|
||||
0,0,1,0,
|
||||
~~(Math.random() * 200),
|
||||
~~(Math.random() * 200),0,1].join(',') + ')';
|
||||
})
|
||||
.add('matrix3d-string', function() {
|
||||
document.getElementById('mover').style.webkitTransform = 'matrix3d(' +
|
||||
'1,0,0,0,0,1,0,0,0,0,1,0,' +
|
||||
(~~(Math.random() * 200)) + ',' +
|
||||
(~~(Math.random() * 200)) + ',0,1)';
|
||||
})
|
||||
// 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>
|
||||
67
test/bench/translate-vs-matrix.html
Normal file
67
test/bench/translate-vs-matrix.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Rounded coordinates</title>
|
||||
<style>
|
||||
#mover {
|
||||
width:10px;
|
||||
height:10px;
|
||||
background:black;
|
||||
}
|
||||
#moved {
|
||||
width:5px;
|
||||
height:5px;
|
||||
background:red;
|
||||
}
|
||||
pre {
|
||||
position:absolute;
|
||||
top:120px;
|
||||
width:500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='mover'>
|
||||
<div id='moved'></div>
|
||||
</div>
|
||||
<pre id='report'></pre>
|
||||
<script src="benchmark.js"></script>
|
||||
<script>
|
||||
var suite = new Benchmark.Suite;
|
||||
// add tests
|
||||
suite
|
||||
.add('translate', function() {
|
||||
document.getElementById('mover').style.MozTransform = 'translate(' +
|
||||
~~(Math.random() * 100) + 'px,' + ~~(Math.random() * 100) + 'px)';
|
||||
})
|
||||
.add('translate3d', function() {
|
||||
document.getElementById('mover').style.MozTransform = 'translate3d(' +
|
||||
~~((Math.random() * 100)) + 'px,' + ~~((Math.random() * 100)) + 'px, 0px)';
|
||||
})
|
||||
.add('matrix3d', function() {
|
||||
document.getElementById('mover').style.MozTransform = 'matrix3d(' +
|
||||
[1,0,0,0,
|
||||
0,1,0,0,
|
||||
0,0,1,0,
|
||||
~~(Math.random() * 100),
|
||||
~~(Math.random() * 100),0,1].join(',') + ')';
|
||||
})
|
||||
.add('matrix3d-string', function() {
|
||||
document.getElementById('mover').style.MozTransform = 'matrix3d(' +
|
||||
'1,0,0,0,0,1,0,0,0,0,1,0,' +
|
||||
(~~(Math.random() * 100)) + ',' +
|
||||
(~~(Math.random() * 100)) + ',0,1)';
|
||||
})
|
||||
// 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>
|
||||
Reference in New Issue
Block a user