Substitution Test

JavaScript performance comparison

Test case created by Creighton Kirkendall

Info

This is a test to tell if using .outerHtml + string replaceor to c ycle through the dom tree and do it individually on each node is quicker for replacing ${var} variable references.

Preparation code

<div id="small-div">
  <div class="div-${my-class}">
    this is my name: ${name}
  </div>
</div>
<div id="medium-div">
  <div class="div-${my-class}">
    this is my name: ${name}
  </div>
  <div class="div-${my-class2}">
    this is my name: ${name2}
  </div>
  <div class="div-${my-class3}">
    this is my name: ${name3}
  </div>
  <div class="div-${my-class4}">
    this is my name: ${name4}
  </div>
  <div class="div-${my-class5}">
    this is my name: ${name5}
  </div>
  <div class="div-${my-class6}">
    this is my name: ${name6}
  </div>
  <div class="div-${my-class7}">
    this is my name: ${name7}
  </div>
</div>
<table id="large">
  <tr>
    <td>
      <div>
        <div class="div-${my-class}">
          this is my name: ${name}
        </div>
        <div class="div-${my-class2}">
          this is my name: ${name2}
        </div>
        <div class="div-${my-class3}">
          this is my name: ${name3}
        </div>
        <div class="div-${my-class4}">
          this is my name: ${name4}
        </div>
        <div class="div-${my-class5}">
          this is my name: ${name5}
        </div>
        <div class="div-${my-class6}">
          this is my name: ${name6}
        </div>
        <div class="div-${my-class7}">
          this is my name: ${name7}
        </div>
      </div>
    </td>
    <td>
      <div>
        <div class="div-${my-class}">
          this is my name: ${name}
        </div>
        <div class="div-${my-class2}">
          this is my name: ${name2}
        </div>
        <div class="div-${my-class3}">
          this is my name: ${name3}
        </div>
        <div class="div-${my-class4}">
          this is my name: ${name4}
        </div>
        <div class="div-${my-class5}">
          this is my name: ${name5}
        </div>
        <div class="div-${my-class6}">
          this is my name: ${name6}
        </div>
        <div class="div-${my-class7}">
          this is my name: ${name7}
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        <div class="div-${my-class}">
          this is my name: ${name}
        </div>
        <div class="div-${my-class2}">
          this is my name: ${name2}
        </div>
        <div class="div-${my-class3}">
          this is my name: ${name3}
        </div>
        <div class="div-${my-class4}">
          this is my name: ${name4}
        </div>
        <div class="div-${my-class5}">
          this is my name: ${name5}
        </div>
        <div class="div-${my-class6}">
          this is my name: ${name6}
        </div>
        <div class="div-${my-class7}">
          this is my name: ${name7}
        </div>
      </div>
    </td>
  </tr>
</table>
<script>
Benchmark.prototype.setup = function() {
    var a = {};
    a["my-class"] = "MYCLASS";
    a["name"] = "Creighton Kirkendall";
    a["my-class2"] = "MYCLASS2";
    a["name2"] = "Creighton Kirkendall";
    a["my-class3"] = "MYCLASS3";
    a["name3"] = "Creighton Kirkendall";
    a["my-class4"] = "MYCLASS4";
    a["name4"] = "Creighton Kirkendall";
    a["my-class5"] = "MYCLASS5";
    a["name5"] = "Creighton Kirkendall";
    a["my-class6"] = "MYCLASS6";
    a["name6"] = "Creighton Kirkendall";
    a["my-class7"] = "MYCLASS7";
    a["name7"] = "Creighton Kirkendall";
    a["my-class8"] = "MYCLASS8";
    a["name8"] = "Creighton Kirkendall";
   
    function replaceVarsInString(str, vars) {
      return str.replace(/\$\{\s*(\S+)\s*}/g, function(t, x) {
        return vars[x];
      });
    }
   
    function replaceOuter(tmp) {
      var text = tmp.outerHTML;
      var tmpDiv = document.createElement("div");
      var newText = replaceVarsInString(text, a);
      tmpDiv.innerHTML = newText;
      tmp.parentNode.replaceChild(tmpDiv.firstChild, tmp);
    }
   
    function replaceRecursive(node) {
      var next;
      try {
        if (node.attributes) {
          for (var i = 0; i < node.attributes.length; i++) {
            var attrib = node.attributes[i];
            if (attrib.specified) {
              attrib.value = replaceVarsInString(attrib.value, a);
            }
          }
        }
        if (node.nodeType === 1) {
          if (node = node.firstChild) {
            do {
              next = node.nextSibling;
              replaceRecursive(node);
            } while (node = next);
          }
   
        } else if (node.nodeType === 3) {
          var text = replaceVarsInString(node.nodeValue, a);
          node.nodeValue = text;
        }
      } catch (error) {
        alert(error);
      }
    }
};
</script>

Preparation code output

this is my name: ${name}
this is my name: ${name}
this is my name: ${name2}
this is my name: ${name3}
this is my name: ${name4}
this is my name: ${name5}
this is my name: ${name6}
this is my name: ${name7}
this is my name: ${name}
this is my name: ${name2}
this is my name: ${name3}
this is my name: ${name4}
this is my name: ${name5}
this is my name: ${name6}
this is my name: ${name7}
this is my name: ${name}
this is my name: ${name2}
this is my name: ${name3}
this is my name: ${name4}
this is my name: ${name5}
this is my name: ${name6}
this is my name: ${name7}
this is my name: ${name}
this is my name: ${name2}
this is my name: ${name3}
this is my name: ${name4}
this is my name: ${name5}
this is my name: ${name6}
this is my name: ${name7}

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Small Using outerHTML
replaceOuter(document.getElementById("small-div"));
pending…
Small Using Recursive Replace
replaceRecursive(document.getElementById("small-div"));
pending…
Medium Using outHTML
replaceOuter(document.getElementById("medium-div"));
pending…
Medium Using Recursive Replace
replaceRecursive(document.getElementById("medium-div"));
pending…
Large Using outerHTML
replaceOuter(document.getElementById("large"));
pending…
Large Using Recursive Replace
replaceRecursive(document.getElementById("large"));
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment