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
Trying to benchmark what is less time consuming, DOM manipulation or adding CSS to the stylesheet through javascript.
<style type="text/css">.red{color:red}.green{color:green}</style>
<div id="untouched">This DIV is unchanged</div>
<div id="touched">This DIV needs to be manipulated</div>
var sheet = (function() {
// Create the <style> tag
var style = document.createElement("style");
// Add a media (and/or media query) here if you'd like!
// style.setAttribute("media", "screen")
// style.setAttribute("media", "only screen and (max-width : 1024px)")
// WebKit hack :(
style.appendChild(document.createTextNode(""));
// Add the <style> element to the page
document.head.appendChild(style);
return style.sheet;
})();
function addCSSRule(sheet, selector, rules, index) {
if("insertRule" in sheet) {
sheet.insertRule(selector + "{" + rules + "}", index);
}
else if("addRule" in sheet) {
sheet.addRule(selector, rules, index);
}
}
var elemPreselected = document.getElementById("touched"),
elemPreselectedStyle = elemPreselected.style;
var head= document.getElementsByTagName('head')[0]
function appendStyle(css) {
var style = document.createElement("style");
style.setAttribute('rel', 'stylesheet');
style.setAttribute('type', 'text/css');
style.innerHTML = css;
head.appendChild(style);
};
function replaceStyleAttribute(e, css) {
e.setAttribute("style", css);
}
function appendStyleAttribute(e, css) {
e.setAttribute('style', e.getAttribute('style') + ";" + css);
}
var elemPreselected = document.getElementById("touched");
elemPreselected.style.color = "";
elemPreselected.className = "";
Ready to run.
Test | Ops/sec | |
---|---|---|
DOM Manipulation |
| ready |
JS CSS Injection |
| ready |
Add class to DOM |
| ready |
DOM Manipulation with preselected element |
| ready |
Add class to DOM with preselected element |
| ready |
DOM Manipulation rewrite style text |
| ready |
DOM Manipulation rewrite style text with preselected element |
| ready |
DOM Manipulation with preselected element's style |
| ready |
Dom manipulation |
| ready |
Replace style attrrbiute |
| ready |
Append style attribute |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.