[Note_deepDive]42장 비동기 프로그래밍

42.1 동기처리와 비동기 처리

- 함수를 호출하면 함수 코드가 평가되고 실행컨텍스트가 생성된다. 이때 생성된 실행 컨텍스트는 콜스택에 푸시되고, 콜스택이 비워지면서 함수가 실행된다. 디버깅 기준으로 보면, 스택은 step in 할때 쌓인다. step over하면 비워진다. step out하면 쌓이고 비워지는걸 생략한다.

- 자바스크립트 엔진은 단 하나의 실행컨텍스트 스택을 가진다. 싱글쓰레드라는 말이다. 한번에 한라인씩밖에 실행 못한다.

- 싱글스레드에서는 처리 시간이 오래걸리는 함수를 실행할 경우 블로킹 현상이 발생한다.

- javascript에는 sleep함수와 setTimeout함수가 있다. sleep은 동기적으로 동작해 2번째 인자로 들어간 시간동안 다른 모든 실행을 중단시킨다. setTimeout은 비동기로 실행되어 이후 실행들을 블로킹하지 않고 이후 실행들이 모두 실행되고 나서야 콜백을 동작시킨다.

- 비동기 방식은 블로킹이 발생하지 않는다는 장점이 있는 반면, 태스크 실행 순서가 보장되지 않는 단점이 있다.

- 대표적으로 setTimeout, setInterval, XmlHttpRequest의 메서드, 이벤트 핸들러는 비동기적으로 동작한다.

 

42.2 이벤트 루프와 태스크 큐

- 자바스크립트는 싱글스레드지만 브라우저에서 태스크가 동시에 처리되는 것처럼 느껴지는 이유는 이벤트 루프 덕분이다.

- 이벤트 루프는 브라우저(v8엔진)에 내장되어있다.

- 엔진은 콜스택, 힙, 이벤트루프, 태스크큐, 마이크로 태스크큐, 렌더링 엔진, webAPI(BOM API, Timer API, XMLHttpRequest API(Ajax) 등 ...  host객체)로 이루어져있다. 

- 비동기 처리에서 소스코드 실행을 제외한 모든 처리는 환경에서 한다. 콜백함수 호출 스케줄링을 위한 타이머 설정과 콜백함수 등록은 브라우저에서 하는 것이다.

 

- 태스크 큐: setTimeout이나 setInterval과 같은 API에 사용되는 콜백함수나 이벤트 핸들러가 일시적으로 보관되는 곳이다. promise의 후속처리는 마이크로 태스크 큐에 들어간다.

- 이벤트 루프: 이벤트 루프는 현재 실행중인 실행컨텍스트가 있는지, 태스크큐에 대기하는 함수가 있는지 확인한다. 그리고 콜스택이 비어있고 태스크 큐에 대기중인 함수가 있으면 이벤트 큐는 순차적으로 태스크큐에 대기 중인 함수를 콜스택으로 이동시킨다. 

- 태스크 큐의 콜백함수가 환경에 의해 푸시된다는 것에 주의하자. setTimeout은 브라우저에게 호출 스케줄링을 시키고, 콜백함수를 브라우저에게 넘겨준다. 시간이 다되면 브라우저가 태스크큐에 콜백을 푸시한다 4초로.설정된 시간이 완료되면, 태스크 큐에 콜백이 푸시가 되는 것이다. 실제 실행시간까지는 태스크 큐에서 차례가 되어서야 콜스택에 들어간다. 그래서 setTimeout의 경우 정확히 4초에 실행된다는 보장이 없다.

 

궁금한점

- 함수( 내부에서 4초 설정 setTimeout, 1번일반 함수를 call), 2번째 함수(2,3번일반 함수를 call)한다고 치면 2,3번 일반함수 수가 콜스택에 있었을 때 타임아웃 콜백이 호출될 수 있는지..? 콜스택이 비어있음의 기준은 caller기준에서 빈건지 아니면 정말 다 비었을때를 의미하는지?