wmseznam-bench-DOM (v3)

Revision 3 of this benchmark created on

Description

Tento krátký benchmark otestuje rychlost prohlížečů při hromadném zpracování dat - buildeni HTML stranky.

Preparation HTML

<script type="text/javascript" src="http://www.super.cz/js/js_all.js?8072">
</script>
<script type="text/javascript">
  var DATA = [];
  for (var i = 0; i < 3e4; i++) {
    var record = {
      id: i,
      float: Math.random() * 10,
      name: "Marek Fojtl",
      email2: "jsem.maly.zkurveny.medvidek.sedici.na.paloucku.a.jebu.Na.vsechno@centrum.cz",
      email: "jerrymf@seznam.cz"
    }
    DATA.push(record);
  }
</script>
<style type="text/css">
  .name, .email, .sallary { display:inline-block; width:300px; } .name { background-color:#ccc;
  } .email { background-color:#ddd; } .sallary { background-color:#eee; }
</style>
<div id="viewport">
</div>

Setup

var viewport = JAK.gel("viewport");
    var docFragment = document.createDocumentFragment();
    var record = null;

Teardown


    JAK.DOM.clear(viewport);

Test runner

Ready to run.

Testing in
TestOps/sec
AppendChild primo do DOMU
for (var i = 0; i < 500; i++) {
  record = DATA[i];
  var container = JAK.mel("div");
  viewport.appendChild(container);

  var name = JAK.mel("span", {
    className: "name"
  });
  name.appendChild(JAK.ctext(record["name"]));
  container.appendChild(name);
  container.appendChild(JAK.ctext(" "));

  var email = JAK.mel("span", {
    className: "email"
  });
  email.appendChild(JAK.ctext(record["email"]));
  container.appendChild(email);
  container.appendChild(JAK.ctext(" "));

  var sallary = JAK.mel("span", {
    className: "sallary"
  });
  sallary.appendChild(JAK.ctext(record["float"]));
  container.appendChild(sallary);
}
ready
AppendChild nejprve do documentFragment a pak do DOMu najednou
for (var i = 0; i < 500; i++) {
  record = DATA[i];
  var container = JAK.mel("div");
  docFragment.appendChild(container);

  var name = JAK.mel("span", {
    className: "name"
  });
  name.appendChild(JAK.ctext(record["name"]));
  container.appendChild(name);
  container.appendChild(JAK.ctext(" "));

  var email = JAK.mel("span", {
    className: "email"
  });
  email.appendChild(JAK.ctext(record["email"]));
  container.appendChild(email);
  container.appendChild(JAK.ctext(" "));

  var sallary = JAK.mel("span", {
    className: "sallary"
  });
  sallary.appendChild(JAK.ctext(record["float"]));
  container.appendChild(sallary);
}
viewport.appendChild(docFragment);
ready
InnerHTML primo do DOMu
for (var i = 0; i < 500; i++) {
  record = DATA[i];
  var container = JAK.mel("div");
  container.innerHTML = '<div><span class="">' + record["name"] + ' </span><span class="email">' + record["email"] + ' </span><span class="sallary">' + record["float"] + '</span></div>'; 
  viewport.appendChild(container);
}
ready
InnerHTML napred do documentFragment a pak do DOMu najednou
for (var i = 0; i < 500; i++) {
  record = DATA[i];
  var container = JAK.mel("div");
  container.innerHTML = '<div><span class="">' + record["name"] + ' </span><span class="email">' + record["email"] + ' </span><span class="sallary">' + record["float"] + '</span></div>'; 
  docFragment.appendChild(container);
}
viewport.appendChild(docFragment);
ready

Revisions

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