Performance of Update 500 Elements One Shot vs. Update 33.33% Elements One By One

index.html

<div id="content"></div>

<script>
  var iterations = 10000;
  var numElements = 500;
  var everyOtherNumberOfElementsToChange = 3;
  var partialPercent = Math.round(1 / everyOtherNumberOfElementsToChange * 100);
  var t0 = 0;
  var t1 = 0;
  var timeOneShot = 0;
  var html = '';
  var partialTime = 0;
  var partialTimePercent = 0;
  for (var i = 1; i<= numElements; i++) {
    html += '<div>' + i + '</div>';
  }

  console.log(`Repeat ${iterations} times of assigning ${numElements} elements as a whole directly using .innerHTML`);
  t0 = performance.now();
  for (var i = 1; i<=iterations; i++) {
    document.getElementById('content').innerHTML = html;
  }
  t1 = performance.now();
  timeOneShot = t1 - t0;
  console.log(`It took ${timeOneShot} milliseconds.`);

  console.log(
      `Repeat ${iterations} times of assigning ${partialPercent}% of ${numElements} elements one by one using .innerHTML`);
  t0 = performance.now();
  for (var i = 1; i <= iterations; i++) {
    for (var j = 0; j <= numElements - 1; j += everyOtherNumberOfElementsToChange) {
      document.getElementById('content').childNodes[j].innerHTML = '<div>Hello</div>';
    }
  }
  t1 = performance.now();
  partialTime = t1 - t0;
  partialTimePercent = Math.round(partialTime / timeOneShot * 100);
  console.log(`It took ${partialTime} milliseconds.`);
  console.log(`It's ${partialTimePercent}% of one shot time.`);
</script>

Update 500 elements takes T1 milliseconds
Update 20% elements one by one takes 57% * T1 milliseconds
Update 25% elements one by one takes 71% * T1 milliseconds
Update 33% elements one by one takes 101% * T1 milliseconds
Update 50% elements one by one takes 144% * T1 milliseconds
Update 100% elements one by one browser crashess every single time it runs... Probably because the time to finish the loop takes too long and Chrome kills it. In React, hopefully service worker will do the job and things are run one by one in a queue but not in a loop

So 33% is the magical number, which takes about the same time as updating 500 elements in one shot.