Stylesheet vs DOM manipulation (v2)

Revision 2 of this benchmark created by qgustavor on

Description

Trying to benchmark what is less time consuming, DOM manipulation or adding CSS to the stylesheet through javascript.

Changes: now testing with 100 elements of each type.

Preparation HTML

<style type="text/css">.red{color:red}.green{color:green}</style>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="untouched">Those DIVs are unchanged</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>
<div class="touched">Those DIVs needs to be manipulated</div>

Setup

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.getElementsByClassName("touched");
    
    window.addCSSRule = addCSSRule;

Teardown


    var elemPreselected = document.getElementsByClassName("touched");
    for (var i = 0, len = elemPreselected.length; i < len; i++){
      elemPreselected[i].style.color = "";
      elemPreselected[i].className = "touched";
    }

Test runner

Ready to run.

Testing in
TestOps/sec
DOM Manipulation
var elems = document.getElementsByClassName("touched");
for (var i = 0, len = elems.length; i < len; i++){
  elems[i].style.color = "red";
  elems[i].style.color = "green";
}
ready
JS CSS Injection
addCSSRule(document.styleSheets[0], ".touched", "color: red");
addCSSRule(document.styleSheets[0], ".touched", "color: green");
ready
Add class to DOM
var elems = document.getElementsByClassName("touched");
for (var i = 0, len = elems.length; i < len; i++){
  elems[i].className = "touched red";
  elems[i].className = "touched green";
}
ready
Bonus: DOM Manipulation with preselected element
for (var i = 0, len = elemPreselected.length; i < len; i++){
  elemPreselected[i].style.color = "red";
  elemPreselected[i].style.color = "green";
}
ready
Bonus: Add class to DOM with preselected element
for (var i = 0, len = elemPreselected.length; i < len; i++){
  elemPreselected[i].className = "touched red";
  elemPreselected[i].className = "touched green";
}
ready
DOM Manipulation rewrite style text
var elems = document.getElementsByClassName("touched");
for (var i = 0, len = elems.length; i < len; i++){
  elems[i].style.cssText = "color:red";
  elems[i].style.cssText = "color:green";
}
ready
DOM Manipulation rewrite style text with preselected element
for (var i = 0, len = elemPreselected.length; i < len; i++){
  elemPreselected[i].style.cssText = "color:red";
  elemPreselected[i].style.cssText = "color:green";
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by MacK on
  • Revision 2: published by qgustavor on
  • Revision 3: published by check_ca on
  • Revision 4: published by Roman Liutikov on
  • Revision 6: published by Pierre Reimertz on
  • Revision 7: published by Mo on