Skip to content

Instantly share code, notes, and snippets.

@nrdobie

nrdobie/dom_benchmark.html

Last active August 23, 2016 22:35
Show Gist options
  • Save nrdobie/d7577f4e668bec03b987358c1c5e33b4 to your computer and use it in GitHub Desktop.
Save nrdobie/d7577f4e668bec03b987358c1c5e33b4 to your computer and use it in GitHub Desktop.
Download ZIP
document#createElement vs Node#cloneElement
Raw
dom_benchmark.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Benchmark</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.1/benchmark.min.js"></script>
<script>
var suite = new Benchmark.Suite;
var baseElement = document.createElement('div');
var element = document.createElement('div');
element.setAttribute('style',
'display: block;' +
'position: absolute;' +
'top: 0;' +
'left: 0;' +
'width: 100vw;' +
'height: 100vh;' +
'z-index: 2;' +
'border: none;' +
'margin: 0;' +
'padding: 0;' +
'box-sizing: border-box;'
);
var getElement = {
functional: function () {
return element.cloneNode();
},
get getter() {
return element.cloneNode();
}
}
// add tests
suite
.add('document#createElement', function () {
var newElement = document.createElement('div');
newElement.setAttribute('style',
'display: block;' +
'position: absolute;' +
'top: 0;' +
'left: 0;' +
'width: 100vw;' +
'height: 100vh;' +
'z-index: 2;' +
'border: none;' +
'margin: 0;' +
'padding: 0;' +
'box-sizing: border-box;'
);
})
.add('document#createElement (no attr)', function () {
document.createElement('div');
})
.add('Node#cloneNode', function () {
element.cloneNode();
})
.add('Node#cloneNode (no attr)', function () {
baseElement.cloneNode();
})
.add('Node#cloneNode (functional)', function () {
getElement.functional();
})
.add('Node#cloneNode (getter)', function () {
getElement.getter;
})
// add listeners
.on('cycle', function(event) {
console.log(String(event.target));
})
.on('complete', function() {
console.log('Fastest is ' + this.filter('fastest').map('name'));
})
// run async
.run({ 'async': true });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment