JSFiddle - React, Tailwind, and code Playground

by Khajan Singh

HTML

<div id="target"></div>

JavaScript

function unoptimized(){
  var baseElement = document.getElementById('target');
  baseElement.innerHTML = '';
  baseElement.innerHTML += BuildTitle();
  baseElement.innerHTML += BuildBody();
  baseElement.innerHTML += BuildFooter();
  return new Date().getTime();
}

function optimized(){
  var elementText = BuildTitle() + BuildBody() + BuildFooter();
  document.getElementById('target').innerHTML = elementText;
  return new Date().getTime();
}

function BuildTitle(){
	return "<h2>Title</h2>";
}
function BuildBody(){
	var x = '';
  for(var i = 0; i < 10000; i++) {
  	x = x + 'AB';
  }
  return '<content><div>'+ x +'</div></content>';
}
function BuildFooter(){
	return "<footer>Footer</footer>" 
}
console.log(new Date().getTime());
console.log(unoptimized());

console.log(optimized());