Insert chunk of html vs parse JSON

Benchmark created by Christian Johansen on

Description

How much of a hit must you take to fetch nice and clean JSON from the server rather than a partial HTML chunk?

Only tests the hit of processing the response. Payload would probably be smaller for JSON, not accounted for here.

Preparation HTML

<div id="container"></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var html = "<option value=\"2000083\">145</option><option value=\"7176\">147</option><option value=\"7348\">155</option><option value=\"3730\">156</option><option value=\"8169\">159</option><option value=\"6735\">159 SportWagon</option><option value=\"3243\">164</option><option value=\"3729\">166</option><option value=\"3236\">33</option><option value=\"3235\">75</option><option value=\"3244\">90</option><option value=\"3241\">Alfasud</option><option value=\"3240\">Alfetta</option><option value=\"8251\">Brera</option><option value=\"3785\">Giulietta</option><option value=\"8082\">GT</option><option value=\"3239\">GTV</option><option value=\"2000147\">Gulietta</option><option value=\"2000094\">MiTo</option><option value=\"3238\">Spider</option><option value=\"3237\">Sprint</option><option value=\"3234\">Andre</option>";
  
  var json = "{\"2000083\":\"145\",\"7176\":\"147\",\"7348\":\"155\",\"3730\":\"156\",\"8169\":\"159\",\"6735\":\"159 SportWagon\",\"3243\":\"164\",\"3729\":\"166\",\"3236\":\"33\",\"3235\":\"75\",\"3244\":\"90\",\"3241\":\"Alfasud\",\"3240\":\"Alfetta\",\"8251\":\"Brera\",\"3785\":\"Giulietta\",\"8082\":\"GT\",\"3239\":\"GTV\",\"2000147\":\"Gulietta\",\"2000094\":\"MiTo\",\"3238\":\"Spider\",\"3237\":\"Sprint\",\"3234\":\"Andre\"}";
  
  var element = document.getElementById("container");
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Insert HTML
element.innerHTML = html;
ready
Parse and insert JSON as joined array
var obj = jQuery.parseJSON(json);
var chunk = [];

for (var prop in obj) {
 chunk.push('<option value="' + prop + '">' + obj[prop] + '</option>');
}

element.innerHTML = chunk.join("");
ready
Parse and insert JSON as concatenated string
var obj = jQuery.parseJSON(json);
var chunk = "";

for (var prop in obj) {
 chunk += '<option value="' + prop + '">' + obj[prop] + '</option>';
}

element.innerHTML = chunk;
ready

Revisions

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

  • Revision 1: published by Christian Johansen on
  • Revision 2: published on