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
This is a simple benchmark demonstrating how expensive it is to access the DOM directly. Doing something simple as reading "element.childNodes" adds a significant amount of overhead to browser-based apps.
Template libraries such as Glimmer, React, and Paperclip implement a sorta virtual DOM that abstracts DOM manipulations for you so that nodes are touched as little as possible. The primary difference between React, and other libraries is that React uses a virtual representation of the DOM in javascript, and applies diffs from that virtual DOM to real nodes (the slow stuff). Glimmer, and Paperclip on the other hand take raw HTML and compile it to an immutable DOM template which gets cloned whenever it's needed in a view. Since templates in Glimmer and Paperclip are immutable, all optimizations happen at compile time - no diffing, just changing the dynamic elements it needs to with the fewest DOM manipulations possible.
var html =
"<div> \
<div> \
<span>a</span> \
<span>b</span> \
<span>c</span> \
<span>d</span> \
</div> \
<div> \
<span>a</span> \
<span>b</span> \
<span>c</span> \
<span>d</span> \
</div> \
<div> \
<span>a</span> \
<span>b</span> \
<span>c</span> \
<span>d</span> \
</div> \
<div> \
<span>a</span> \
<span>b</span> \
<span>c</span> \
<span>d</span> \
</div> \
</div>".replace(/[\s\r\n\t]+/g,"");
var div = document.createElement("div");
div.innerHTML = html;
function toVDOM(div) {
var type = div.nodeType;
if (type === 1) {
return {
nodeType: type,
nodeName: div.nodeName,
childNodes: Array.prototype.map.call(div.childNodes, toVDOM)
};
} else if (type === 3) {
return {
nodeType: type,
nodeValue: div.nodeValue,
childNodes: []
};
} else {
return {
nodeType: type
};
}
}
var vdiv = toVDOM(div);
function walk(node) {
if (node.nodeType === 1 && node.childNodes.length)
for (var i = node.childNodes.length; i--;) walk(node.childNodes[i]);
}
Ready to run.
Test | Ops/sec | |
---|---|---|
dom touch 1 |
| ready |
dom touch 2 |
| ready |
dom touch 3 |
| ready |
dom walk |
| ready |
vdom touch 1 |
| ready |
vdom touch 2 |
| ready |
vdom touch 3 |
| ready |
vdom walk |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.