[JST] Reflows in action

HTML

<button id=addOneByOne>Elements added one by one</button>
<button id=addAllInOnce>Elements added all in once</button>
<button id=clearContent>Clear elements</button>
<div>
  Added one by one takes: <span id=manyReflowsTime></span>
</div>
<div>
  Added all in once takes: <span id=oneReflowTime></span>
</div>
<div id=manyReflowsContainer>
</div>
<div id=oneReflowContainer>
</div>

JavaScript

var numberOfElements = 100000;

function appendOneByOne(){
  for(var i = 0; i < numberOfElements; i++){
  	var element = createDiv(i);
  	manyReflowsContainer.appendChild(element);
  }
};

function appendAllInOnce(){
	var elements = [],
  	containerDiv = createDiv("container");
  
  for(var i = 0; i < numberOfElements; i++){
  	var element = createDiv(i);
    containerDiv.appendChild(element);
  }
  
  debugger;
  oneReflowContainer.appendChild(containerDiv);
}

function createDiv(text){
	var div = document.createElement('div');
  div.innerText = text;
  return div;
}

addOneByOne.onclick = function(){
	var start = performance.now();
  appendOneByOne();
  manyReflowsTime.innerText = performance.now() - start;
}

addAllInOnce.onclick = function(){
	var start = performance.now();
  appendAllInOnce();
  oneReflowTime.innerText = performance.now() - start;
}

clearContent.onclick = function(){
	manyReflowsContainer.innerHTML = "";
  oneReflowContainer.innerHTML = "";
}