Edit in JSFiddle

<body>
<h1 id="text"></h1>
<script>
// 콜백을 받지만 비동기로 실행되지 않습니다.
function notAsyncTask(callback){
  for(var i=0; i < 200000000; i++) Math.random(); // 이 코드가 메인 쓰레드에서 실행되기 때문입니다.
  callback();
}

var h1 = document.getElementById('text');
h1.innerHTML += 'One<br>';
notAsyncTask(function(){ // 실행되는 순간 브라우저 UI가 잠시 먹통이 될 수 있습니다.
  h1.innerHTML += 'Two<br>';
});
h1.innerHTML += 'Three<br>';

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