innerHTML vs className and NodeValue x10

Benchmark created by Luke Page on


Description

Test to compare making a dom update with innerHTML compared to changing a className and setting a text nodes nodeValue across 10 spans.

Preparation HTML

<div id="testcenter1"></div>
<div id="testcenter2"></div>
<script>
  var createStyles = function(selectorArray) {
   var i, j, cssText = "",
       char1 = 'a',
       char2 = 'a',
       colours = ["red", "green", "Blue", "violet"],
       currentClassName = "",
       selector = "",
       incrementClass = function() {},
       usedClasses = [];
  
   for (i = 0; i < selectorArray.length; i++) {
    for (j = 0; j < selectorArray[i].count; j++) {
     currentClassName = char1 + char2;
     if (char2 === 'z') {
      char1 = char1.addOne();
      char2 = 'a';
     } else {
      char2 = char2.addOne();
     }
     if (!selectorArray[i].unused) {
      usedClasses.push(currentClassName);
     }
     selector = selectorArray[i].selector.replace("{0}", currentClassName);
     cssText += selector + " {\n background: " + colours[Math.floor(Math.random() * 4)] + "; }\n\n";
    }
   }
  
   addStyleTag(cssText);
   return usedClasses;
  };
  
  String.prototype.addOne = function() {
   return String.fromCharCode(this.charCodeAt(0) + 1);
  };
  
  var addStyleTag = function(cssText) {
  
   var ss = document.createElement('style');
   ss.setAttribute("type", "text/css");
  
   if (ss.styleSheet) { // IE
    ss.styleSheet.cssText = cssText;
   } else {
    ss.appendChild(document.createTextNode(cssText));
   }
   var head = document.getElementsByTagName('head')[0];
   head.appendChild(ss);
  };
  
  
  var usedClasses1 = createStyles([{
   selector: ".tc1{0}",
   count: 25
  }]);
  
  var usedClasses2 = createStyles([{
   selector: "#testcenter2 div.testcontainer table span.{0}",
   count: 625
  }]);
  
  var testcenter1 = document.getElementById("testcenter1");
  var testcenter2 = document.getElementById("testcenter2");
  
  var create100RowsUIH = function(testcontainer, classes, noOfSpans, classesPrefix) {
   var tbl = document.createElement("table"),
       tbody = document.createElement("tbody"),
       i, j, k, tr, td, dcTb = document.createElement("div"),
       tb, onClick = function() {
     alert("a");
       };
   noOfSpans = noOfSpans || 1;
   classesPrefix = classesPrefix || "";
  
   tbl.className = "tbl";
   tbl.id = "mytb";
   testcontainer.appendChild(tbl);
  
   tbl.appendChild(tbody);
  
   for (i = 0; i < 5; i++) {
    tr = "<table><tbody><tr>";
    for (j = 0; j < 5; j++) {
     td = "<td>";
     for (k = 0; k < noOfSpans; k++) {
      td += "<span class=\"" + classesPrefix + classes[Math.floor(Math.random() * classes.length)] + "\">_</span>";
     }
     td += "</td>";
     tr = tr + td;
    }
    tr = tr + "</tr></tbody></table>";
    dcTb.innerHTML = tr;
    tr = dcTb.childNodes[0].childNodes[0].childNodes[0];
  
    tbody.appendChild(tr);
   }
  };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
change using innerHTML
create100RowsUIH(testcenter1, usedClasses1, 10, "tc1");
create100RowsUIH(testcenter2, usedClasses2, 10);
var cellTest1 = testcenter1.childNodes[0].childNodes[0].childNodes[3].childNodes[2];

var cellTest2 = testcenter2.childNodes[0].childNodes[0].childNodes[3].childNodes[2];

cellTest1.innerHTML = '<span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span>';
cellTest2.innerHTML = '<span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span><span class="ax">New Text</span>';

testcenter1.innerHTML = "";
testcenter2.innerHTML = "";
ready
innerHTML and className
create100RowsUIH(testcenter1, usedClasses1, 10, "tc1");
create100RowsUIH(testcenter2, usedClasses2, 10);
var cellTest1 = testcenter1.childNodes[0].childNodes[0].childNodes[3].childNodes[2];

var cellTest2 = testcenter2.childNodes[0].childNodes[0].childNodes[3].childNodes[2];


cellTest1.childNodes[0].innerHTML = 'New Text';
cellTest1.childNodes[0].className = 'ax';
cellTest1.childNodes[1].innerHTML = 'New Text';
cellTest1.childNodes[1].className = 'ax';
cellTest1.childNodes[2].innerHTML = 'New Text';
cellTest1.childNodes[2].className = 'ax';
cellTest1.childNodes[3].innerHTML = 'New Text';
cellTest1.childNodes[3].className = 'ax';
cellTest1.childNodes[4].innerHTML = 'New Text';
cellTest1.childNodes[4].className = 'ax';
cellTest1.childNodes[5].innerHTML = 'New Text';
cellTest1.childNodes[5].className = 'ax';
cellTest1.childNodes[6].innerHTML = 'New Text';
cellTest1.childNodes[6].className = 'ax';
cellTest1.childNodes[7].innerHTML = 'New Text';
cellTest1.childNodes[7].className = 'ax';
cellTest1.childNodes[8].innerHTML = 'New Text';
cellTest1.childNodes[8].className = 'ax';
cellTest1.childNodes[9].innerHTML = 'New Text';
cellTest1.childNodes[9].className = 'ax';


cellTest2.childNodes[0].innerHTML = 'New Text';
cellTest2.childNodes[0].className = 'ax';
cellTest2.childNodes[1].innerHTML = 'New Text';
cellTest2.childNodes[1].className = 'ax';
cellTest2.childNodes[2].innerHTML = 'New Text';
cellTest2.childNodes[2].className = 'ax';
cellTest2.childNodes[3].innerHTML = 'New Text';
cellTest2.childNodes[3].className = 'ax';
cellTest2.childNodes[4].innerHTML = 'New Text';
cellTest2.childNodes[4].className = 'ax';
cellTest2.childNodes[5].innerHTML = 'New Text';
cellTest2.childNodes[5].className = 'ax';
cellTest2.childNodes[6].innerHTML = 'New Text';
cellTest2.childNodes[6].className = 'ax';
cellTest2.childNodes[7].innerHTML = 'New Text';
cellTest2.childNodes[7].className = 'ax';
cellTest2.childNodes[8].innerHTML = 'New Text';
cellTest2.childNodes[8].className = 'ax';
cellTest2.childNodes[9].innerHTML = 'New Text';
cellTest2.childNodes[9].className = 'ax';

testcenter1.innerHTML = "";
testcenter2.innerHTML = "";
ready
nodeValue and className
create100RowsUIH(testcenter1, usedClasses1, 10, "tc1");
create100RowsUIH(testcenter2, usedClasses2, 10);
var cellTest1 = testcenter1.childNodes[0].childNodes[0].childNodes[3].childNodes[2];

var cellTest2 = testcenter2.childNodes[0].childNodes[0].childNodes[3].childNodes[2];


cellTest1.childNodes[0].childNodes[0].nodeValue = 'New Text';
cellTest1.childNodes[0].className = 'ax';
cellTest1.childNodes[1].childNodes[0].nodeValue = 'New Text';
cellTest1.childNodes[1].className = 'ax';
cellTest1.childNodes[2].childNodes[0].nodeValue = 'New Text';
cellTest1.childNodes[2].className = 'ax';
cellTest1.childNodes[3].childNodes[0].nodeValue = 'New Text';
cellTest1.childNodes[3].className = 'ax';
cellTest1.childNodes[4].childNodes[0].nodeValue = 'New Text';
cellTest1.childNodes[4].className = 'ax';
cellTest1.childNodes[5].childNodes[0].nodeValue = 'New Text';
cellTest1.childNodes[5].className = 'ax';
cellTest1.childNodes[6].childNodes[0].nodeValue = 'New Text';
cellTest1.childNodes[6].className = 'ax';
cellTest1.childNodes[7].childNodes[0].nodeValue = 'New Text';
cellTest1.childNodes[7].className = 'ax';
cellTest1.childNodes[8].childNodes[0].nodeValue = 'New Text';
cellTest1.childNodes[8].className = 'ax';
cellTest1.childNodes[9].childNodes[0].nodeValue = 'New Text';
cellTest1.childNodes[9].className = 'ax';


cellTest2.childNodes[0].childNodes[0].nodeValue = 'New Text';
cellTest2.childNodes[0].className = 'ax';
cellTest2.childNodes[1].childNodes[0].nodeValue = 'New Text';
cellTest2.childNodes[1].className = 'ax';
cellTest2.childNodes[2].childNodes[0].nodeValue = 'New Text';
cellTest2.childNodes[2].className = 'ax';
cellTest2.childNodes[3].childNodes[0].nodeValue = 'New Text';
cellTest2.childNodes[3].className = 'ax';
cellTest2.childNodes[4].childNodes[0].nodeValue = 'New Text';
cellTest2.childNodes[4].className = 'ax';
cellTest2.childNodes[5].childNodes[0].nodeValue = 'New Text';
cellTest2.childNodes[5].className = 'ax';
cellTest2.childNodes[6].childNodes[0].nodeValue = 'New Text';
cellTest2.childNodes[6].className = 'ax';
cellTest2.childNodes[7].childNodes[0].nodeValue = 'New Text';
cellTest2.childNodes[7].className = 'ax';
cellTest2.childNodes[8].childNodes[0].nodeValue = 'New Text';
cellTest2.childNodes[8].className = 'ax';
cellTest2.childNodes[9].childNodes[0].nodeValue = 'New Text';
cellTest2.childNodes[9].className = 'ax';

testcenter1.innerHTML = "";
testcenter2.innerHTML = "";
ready

Revisions

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