document call per-loop vs after loop

Benchmark created by Sem Karaman on

Description

this tests to see if it's better to add a piece of text into HTML one piece at a time within a for loop, or if it's better to complete the loop and then print everything

Preparation HTML

<div id="myDiv"></div>
<style>
#myDiv{
    width: 300px;
    height: 100px;
    border: 1px dotted grey;
    overflow: auto;
}</style>

Test runner

Ready to run.

Testing in
TestOps/sec
inside
var myArray = [
  'a', 'b', 'c', 'd', 'e'
];

for (var i = 0; i < myArray.length; i++) {
  myArray[i] = myArray[i] === 'a' ? 'foo' : 'bar';
};

for (var i = 0; i < myArray.length; i++) {
  var myDiv = document.getElementById('myDiv');
  myDiv.innerHTML = myDiv.innerHTML + " " + myArray[i];
}
ready
after
var myArray = [
  'a', 'b', 'c', 'd', 'e'
];

for (var i = 0; i < myArray.length; i++) {
  myArray[i] = myArray[i] === 'a' ? 'foo' : 'bar';
};

for (var i = 0; i < myArray.length; i++) {
  if (typeof myArray['st'] === 'undefined') {
    myArray['st'] = myArray[i];
  } else {
    myArray['st'] = myArray['st'] + " " + myArray[i];
  }
}

var myDiv = document.getElementById('myDiv');
myDiv.innerHTML = myDiv.innerHTM L + " " + myArray['st'];
ready

Revisions

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

  • Revision 1: published by Sem Karaman on