이벤트 루프와 매크로

자바스크립트의 흐름은 nodejs 와 마찬가지로 이벤트 루프에 기반하여 실행됩니다.

이벤트 루프

태스크를 바라보고 태스크에 작업할 내용이 있으면 처리하고 없다면 대기 하는
자바스크립트 내에서 끊임 없이 돌아가는 loop 입니다.

여기서 이벤트 루프를 돌아가게 하는 태스크 종류에는

1. 외부 스크립트
2. 사용자가 마우스를 움직여 mousemove 이벤트와 이벤트 핸들러를 실핼할때
3. settimeout 에서 설정한 시간이 다될때, callback을 실행할때
   ... 등등등

태스크의 특징이 있는대
1. 엔진이 특정 태스크를 처리하는 동안엔 렌더링이 절대 일어나지 않습니다.
2. 태스크 처리에 시간이 오래 걸리면 브라우저는 태스크를 처리하는 동안에 발생한 사용자 이벤트 등의 새로운 태스크들을 처리하지 못합니다.

아래와 같이 태스크를 처리하는동안 브라우저는 아무런 작업을 하지 못하지만

let i = 0;
let start = Date.now();

function count() {
  for (let j = 0; j < 1e9; j++) {
    i++;
  }
}
                          
                          
count();

아래와 같이 태스크를 쪼개면 브라우저 동작이 가능합니다.

let i = 0;

let start = Date.now();

function count() {
  
  do{
      i++;
  }while(i % 1e6 != 0);

  console.log(i);
  if(i == 1e9) { 
     alert("처리에 걸린 시간: " + (Date.now() - start) + "ms");
  } else {
    setTimeout(count);

  }
}

count();