1. 동기 처리와 비동기 처리
동기 처리는 순차적으로 함수가 실행되다가 delay가 있을 경우 다른 함수의 실행을 block하고 기다린다.
하지만 비동기 처리는 delay가 있음에도 다른 함수의 실행을 진행하는 것이다.
함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다.
이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택에 푸시되고 함수 코드가 실행된다.
함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다.
-
동기 처리는 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크가 대기하는 방식
실행순서 보장, 앞선 태스크가 종료할 때까지 이후 태스크들이 브로킹되는 단점 -
비동기 처리 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식
실행 순서를 보장하지 못함, 블로킹이 발생하지 않는다.
<비동기 처리의 한계>
비동기 처리를 위한 콜백 패턴은 콜백 헬을 발생시켜 가독성을 나쁘게 하고,
비동기 처리 중 발생한 에러의 예외 처리가 곤란하며
여러개의 비동기 처리를 한번에 처리하는 데도 한계가 잇다.
<비동기 처리 방식을 사용하는 것>
타이머 함수의 setTimeout과 setInterval
HTTP 요청
이벤트 핸들러
2. 이벤트 루프와 태스크 큐
이벤트 루프: 자바스크립트이 동시성을 지원하는 것, 브라우저 내장 기능,
자바스크립트 엔진
-
콜 스택: 실행 컨텍스트 스택, 최상위 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크고 실행되지 않는다.
-
힙: 객체가 저장되는 메모리 공간, 메모리 공간의 크기를 런타임에 결정(동적 할당)해야 한다. 따라서 객체가 저장되는 메모리 공간이 힙은 구조화되어 있지 않는다.
브라우저 환경
-
태스크 큐: 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역
-
이벤트 루프: 콜스택이 비어있고 태스크 큐에 대기 중인 함수 가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.
브라우저 환경에서 예제 동작
function foo() {
console.log('foo');
}
function bar() {
console.log('bar');
}
setTimeout(foo, 0);
bar();
- 전역 코드 평가, 전역 실행 컨텍스트 생성 콜 스택에 푸시
- 전역 코드 실행, setTimeout함수가 호출 -> setTimeout 함수의 함수 실행 컨텍스트가 생성되고 콜 스택에 푸시되어 현재 실행 중인 실행 컨텍스트가 된다.
- setTime 함수가 실행되면 콜백 함수를 호출 스케줄링하고 종료되어 콜 스택에 팝된다.
- 브라우저가 수행하는 4.1과 자바스크립트 엔진이 수행하는 4.2는 병행 처리된다.
4.1 브라우저는 타이머를 설정하고 타이머의 만료를 기다린다. 타이머가 만료되면 콜백 함수 foo가 태스크 큐에 푸시된다.
지연 시간 이후에 콜백함수 foo가 태스크 큐에 푸시되어 대기하게 된다.
setTimeout 함수로 호출 스케줄링한 콜백 함수는 정확히 지연 시간 후에 호출된다는 보장은 없다.
4.2 bar 함수가 호출되어 bar 함수의 함수 실행 컨텍스트가 생성되고 콜스택에 푸시되어 현재 실행 중인 실행 컨텍스트가 된다.
이후 bar 함수가 종료되어 콜 스택에 팝된다. 이때 브라우저가 타이머가 경과했다면 foo함수는 아직 태스크 큐에서 대기 중이다. - 전역 코드 실행이 종료되고 전역 실행 컨텍스트가 콜 스택에서 팝된다. 이로서 콜 스택에는 아무런 실행 컨텍스트도 존재하지 않게 된다.
- 이벤트 루프에 의해 콜 스택이 비어 있음이 감지되고 택스크 큐에 대기 중인 콜백 함수 foo가 이벤트 루프에 의해 콜 스택에 푸시된다. 이후 foo 함수가 종료되어 콜 스택에서 팝된다.
