42장 비동기 처리

비동기 프로그래밍

42.1 동기 처리와 비동기처리

함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다
생성된 함수 실행 컨텍스트는 스택에 푸시되고 함수가 실행되고 나서 
종료되면 제거된다. 

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는
함수를 실행할 수 있는 창구가 하나이며, 하나의 함수만 실행될 수 있음을
의미한다.
따라서 최상위 컨텍스트를 제외하면 모든 실행 컨텍스트는 대기 컨텍스트 이고 
실행중이 컨텍스트가 종료되면 실행하게 된다. 이때 
처리시간이 오래걸리는 작업을 실행하는 경우, 블록킹이 발생한다.

이처럼 하나의 스레드가 종료되기 까지를 기다리고 순차적으로 동작하는 방식을
동기 처리라고 한다. 따라서 실행 순서의 보장을 해주지만 다른 태스크들이 
블로킹 된다는 단점이 있다.

비동기 처리 방식은 현재 실행중인 태스크가 종료되지 않은 상태라 해도 
다음 태스크가 실행됨으로 블로킹되지 않는다. 따라서 태스크의 처리 순서가
보장되지 않는다.

/**
위의 말을 정리하면 결국 단일스레드 라고 하지만, 결국 처리 공간을 여러개를 구현하여서
이 공간에서 우선순위를 체크하고 실행해주는 루프를 도는방식을 이용함으로 병렬처리가
가능하다는것이다. 
*/

42.2 이벤트 루프와 태스크 큐

자바스크립트의 엔진은 2개의 영역으로 구분되고

콜스택
실행컨텍스트와 같이 실행되는 결과들이 저장되는 공간이라고 볼 수 있다.

힙
다른 객체와 변수들 과 같은 일반적인 자료들이 이곳에 저장된다고 볼 수 있음.

태스크 큐 
setTimeout 이나 setInterval 과 같은 비동기 함수의 콜백 함수 또는 
이벤트 핸들러가 일시적으로 보관되는 공간으로 
비동기 작업을 처리하기 위해서 존재한다.

이벤트 루프
콜스택에 실행중인 컨텍스트가 있는지, 대기중인 함수가 있는지 반복해서 확인한다.
순차적으로 태스크 큐에 대기중인 함수를 콜 스택으로 이동시킨다.

 

{
	function foo() {
		console.log("foo");
	}

	function bar() {
		console.log("bar");
	}
	
	setTimeout(foo, 0);
	bar();
}

{
	function foo() {
		console.log("foo");
	}

	function bar() {
		while(true) {
			;
		}
	}
	
	setTimeout(foo, 0);
	bar();
}

의 경우 setTimeout이 호출되고 태스크 큐에 올라간다.
그리고 바가 실행컨텍스트로 등록되고 실행된다.
4ms가 지난후 이벤트 루프에서 foo를 보내준다.

그렇다면 여기서 만약. while과 같은경우 끝나지 않았을때 실행되지 않을까?

 

이벤트 루프는 실행이 끝날때 까지 기다리는 동작을 취함으로 위의 코드는 동작하지 않는다는것을 

알아두어야 한다.