gistfile1.txt

  // Just for check if page responsable or clog already by clicking page
  const el = document.getElementsByTagName('html')[0];
  el.addEventListener('click', function(){
      console.log('html click handler processed');
  })

  console.log('START RUN THE CODE');

  var t0 = performance.now();

  // Blocking version
  // for (let i = 0; i < 10000; i++) {
  //   $('body').append('<span>haha</span>')
  // }

  // Optimize version (Async utilize setTimeout function divided to 100 Macro Tasks)
  for (let i = 0; i < 100; i++) {
    setTimeout(function() {
      for (let i = 0; i < 100; i++) {
        $('body').append('<span>haha</span>')
      }
      console.log('100 dom operation done');
    }, 0);
  }

  var t1 = performance.now();

  /*
  * Checking duration between t0 line to t1 line
  *
  * Notice: In Async version
  * Duration only stands for register a time hanlder not even perform DOM operation yet
  */

  console.log('code block duration:', (t1-t0) , " milliseconds.");

  // Check length of span is equal in different approach
  // 5 second its enough to finish all operations
  setTimeout(function() {
    console.log('number of span', $('body span').length);
  }, 5000);