Edit in JSFiddle

<body>
<h1 id="text"></h1>
<script>
function notAsyncTask(){
  return new Promise(function(resolve, reject){
    for(var i=0; i < 200000000; i++) Math.random();
    resolve();
  });
}

var h1 = document.getElementById('text');
h1.innerHTML += 'One<br>';
notAsyncTask().then(function(){ // 실행되는 순간 브라우저 UI가 잠시 먹통이 될 수 있습니다.
  h1.innerHTML += 'Two<br>';
  // Promise를 이용하면 약간의 시간차를 두고 Promise 생성자에 전달된 함수가 메인 쓰레드에서 실행됩니다.
  // 물론 Promise 내부에서 비동기(Ajax) 작업을 한다면 그 작은 백그라운드 쓰레드에서 실행됩니다.
});
h1.innerHTML += 'Three<br>';
setTimeout(function(){
  h1.innerHTML += 'Four<br>';
}, 1);

// One-Two-Three-Four 일까요?
// 혹은 One-Three-Four-Two 일까요?
</script>
</body>