Rendering HTML vs. JSON endpoint

JavaScript performance comparison

Test case created by Marc Compte

Preparation code

<div id="targetHTML"></div>
<div id="targetJSON"></div>
<div id="targetJSONWithTemplate"></div>
<div id="targetJSONupdate">
   <div class="Uone"></div>
   <div class="Utwo">
       <div class="Uthree"></div>
       <div class="Ufour"></div>
   </div>
</div>
      
<script>
Benchmark.prototype.setup = function() {
  var json = '{"one": "1", "two": {"three": 3, "four": 4}}';
  var htmlSource = '<div class="one">1</div><div class="two"><div class="three">3</div><div class="four">4</div></div>';
  
  function doJSON(json, aClass, target) {
      if (typeof json == 'string') var data = JSON.parse(json);
      else var data = json;
      if (typeof target == 'undefined') target = document.getElementById('targetJSON');
      if (typeof aClass != 'undefined') target.className=aClass;
      for (elem in data) {
          if (typeof data[elem] == 'object') {
            var newEl = document.createElement('div');
            newEl.className = elem;
            target.append(newEl);
            doJSON(data[elem], elem, newEl);
          } else {
              var newEl = document.createElement('div');
              newEl.className = elem;
              newEl.innerHTML = data[elem];
              target.appendChild(newEl);
          }
      };
  }
  
  function doJSONWithTemplate(json) {
      if (typeof json == 'string') var data = JSON.parse(json);
      else var data = json;
      var template = '<div class="{{className}}">{{content}}</div>';
      var result = '';
      for (elem in data) {
          var tmp = template.replace('{{className}}', elem);
          if (typeof data[elem] == 'object') result += tmp.replace('{{content}}',doJSONWithTemplate(data[elem]));
          else {
              result += tmp.replace('{{content}}',data[elem]);
          }
      };
      return result;
  }
  
  function doJSONUpdate(json) {
      if (typeof json == 'string') var data = JSON.parse(json);
      else var data = json;
      for (elem in data) {
          if (typeof data[elem] == 'object') doJSONUpdate(data[elem]);
          else {
              document.getElementsByClassName('U'+elem)[0].innerHTML = data[elem];
          }
      };
  }

};
</script>

Preparation code output

<div id="targetHTML"></div> <div id="targetJSON"></div> <div id="targetJSONWithTemplate"></div> <div id="targetJSONupdate"> <div class="Uone"></div> <div class="Utwo"> <div class="Uthree"></div> <div class="Ufour"></div> </div> </div>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Source: HTML, DOMinsert: innerHTML
document.getElementById('targetHTML').innerHTML = htmlSource;
pending…
Source: JSON, DOMinsert: append(dom), clientTemplating: false
document.getElementById('targetJSON').innerHTML = '';
var html = doJSON(json);
pending…
Source: JSON, DOMinsert: innerHTML, clientTemplating: true
var html = doJSONWithTemplate(json);
document.getElementById('targetJSONWithTemplate').innerHTML = html;
pending…
Source: JSON, DOMinsert: onlyTextNodes
doJSONUpdate(json);
pending…

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

0 Comments