[자바스크립트] 비동기 처리와 이벤트루프

비동기 프로그래밍 vs 동기 프로그래밍

무슨 차이일까?

동기 처리

: 현재 실행 중인 태스크가 종료할 때까지 다음 태스크가 대기하는 방식
-> 실행 순서가 보장되지만 실행 중인 태스크가 종료될 때까지 이후 태스크들은 블로킹 됩니다.

비동기 처리

: 현재 실행 중인 태스크가 종료되지 않더라도 다음 태스크를 실행하는 방식
-> 블로킹이 발생하지 않지만 실행 순서는 보장되지 않습니다.

 

자바스크립트 비동기 코드 예시

function a(){
	console.log('a');
}


function b(){
	setTimeout(a, 300);
 	console.log('b'); 
}


b();


//실행결과
//'b'
//'a'

 

자바스크립트가 비동기 처리를 지원하지 않는다면
a함수가 실행된 후에 b함수가 실행되어야 합니다.

이벤트루프를 통해 비동기 처리를 지원하기 때문에
setTimeout함수의 콜백함수가 실행되기 전에
b함수가 실행되는 것을 확인할 수 있습니다.

 

어떻게 비동기 처리를 할까?

자바스크립트 자체는 싱글 스레드 방식으로 동작하지만
런타임 환경인 브라우저 또는 Node.js에서 이벤트 루프를 통해 비동기 처리를 지원합니다.

 

이벤트 루프는 태스크를 처리하기 위해 존재하는 루프입니다.
자바스크립트의 동시성을 지원하기 위한 브라우저 또는 Node.js의 기능입니다.

동시성: 동시에 실행되는 것처럼 보이는 것
병렬성: 실제로 동시에 실행되는 것

JavaScript 엔진은 Memory Heap과 Call Stack으로 이루어져 있습니다.

1. 함수가 호출되면 Call Stack에 쌓이게 됩니다.
2. 이벤트 루프는 Call Stack이 비어있을 경우, Callback Queue(Task Queue)에서 함수를 꺼내 Call Stack에 추가합니다.
3. 브라우저와 자바스크립트 엔진의 병렬 처리
   1. Call Stack에 있는 비동기 함수는 브라우저 또는 Node.js에서 처리를 하게 되고, 비동기 함수의 작업이 완료되면 실행될 콜백함수를 Callback Queue로 넘겨주게 됩니다.
   2. 그동안 자바스크립트 엔진은 Call Stack에 있는 나머지 동기 함수들을 처리하게 됩니다.

 

콜스택이 비어있을 때 콜백 큐에서 있는 콜백함수들을 콜스택에 추가하기 때문에 

아래 코드처럼 setTimeout함수가 0초 후에 실행되게끔 설정을 해도 바로 실행이 되는 것이 아니라

console.log('b')가 먼저 실행됨을 알 수 있습니다.

function a(){
	console.log('a');
}


function b(){
	setTimeout(a, 0);
 	console.log('b'); 
}


b();


//실행결과
//'b'
//'a'

 

 

콜백 큐에는 어떤 종류가 있을까?

콜백 큐의 종류로는
Task Queue, Microtask Queue,Animation Frames가 있습니다.

 

우선순위 순으로 실행됩니다

1. Microtask Queue :프로미스의 후속 처리 메소드의 콜백함수가 보관됨

   : process.nextTick, Promises, queueMicroTask, MutationObserver

2. Animation Frames: requestAnimationFrame과 같은 메서드의 콜백함수가 보관됨

3. Task Queue:setTimeout 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 보관됨

  : setTimeout, setInterval, setImmediate

 

 

렌더링은 언제 실행될까?

마이크로 태스크 큐를 실행한 뒤 렌더링이 일어난다.

마이크로 태스크 큐에 있는 모든 작업을 우선적으로 마무리 한 후 렌더링을 한다.