jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
Comparing 4 different ways to dynamically insert new elements into the DOM tree.
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<script>
// You can read this: <http://ejohn.org/blog/dom-documentfragments/>
function text(node, txt) {
node.appendChild(document.createTextNode(txt));
node.setAttribute('class', 'hello-world');
return node;
}
function cleanUp(node) {
node.innerHTML = "";
}
var content = [
document.createElement("hr"),
text(document.createElement("b"), "Links:"),
document.createTextNode(" "),
text(document.createElement("a"), "Link A"),
document.createTextNode(" | "),
text(document.createElement("a"), "Link B"),
document.createTextNode(" | "),
text(document.createElement("a"), "Link C")
];
var wrapperDiv = document.createElement("div")
for (var i = 0, j = content.length; i < j; i++) {
wrapperDiv.appendChild(content[i].cloneNode(true));
}
var wrapperFragment = document.createDocumentFragment()
for (var i = 0, j = content.length; i < j; i++) {
wrapperFragment.appendChild(content[i].cloneNode(true));
}
var htmlString = '<hr><b class="hello-world">Links:</b> <a class="hello-world">Link A</a> | <a class="hello-world">Link B</a> | <a class="hello-world">Link C</a>'
//Note += innerHTML destroys the pre-existing html and rebuilds it so it is not a fair/safe comparison
</script>
Ready to run.
Test | Ops/sec | |
---|---|---|
appendChild |
| ready |
DocumentFragment |
| ready |
innerHTML |
| ready |
“Offline” node method |
| ready |
insertAdjacentHTML (not all browsers) |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.