42.1. 동기 처리와 비동기 처리
- 함수의 실행 순서는 실행 컨텍스트 스택으로 관리함
- 자바스크립트 엔진은 단 하나의 실행 컨텍스트를 가짐
- 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 (single thread) 방식
- 시간이 걸리는 태스크를 실행하는 경우 블로킹(blocking, 작업 중단) 발생
- 동기 처리 (synchronus) : 실행 중인 태스크가 종료할 때까지 다음 태스크가 대기하는 방식
- 실행 순서 보장
- 앞선 태스크 종료 시까지 이후 태스크들이 블로킹 됨
- 비동기 처리 (asynchronous) : 태스크가 실행 중이더라도 다음 태스크를 실행하는 방식
- 실행 순서 보장되지 않음
- 블로킹 발생하지 않음
- 비동기 함수는 콜백 패턴 사용
- 콜백 헬 발생으로 가독성 좋지 않음
- 에러 처리 어려움
- 여러 개의 비동기 처리 시에도 한계 있음
- 타이머 함수와 HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작
42.2. 이벤트 루프와 태스트 큐
- 이벤트 루프 (event loop) : 자바스크립트의 동시성 지원
- 브라우저 내장된 기능
- 자바스크립트 엔진 영역
- 콜 스택 (call stack)
- 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조
- 함수 호출 시 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 실행됨
- 최상위 실행 컨텍스트(실행 중인 실행 컨텍스트)가 종료될 때까지 다른 태스크는 실행되지 않음
- 힙 (heap)
- 객체가 저장되는 메모리 공간
- 콜 스택의 실행 컨텍스트는 힙에 저장된 객체를 참조함
- 메모리 크기가 정해져 있지 않아 구조화 되어 있지 않음
- 자바스크립트 엔진은 태스크가 요청되면 콜 스택을 통해 요청된 작업을 순차적으로 실행
- 콜 스택 (call stack)
- 비동기 처리의 소스코드 평가와 실행을 제외한 모든 처리는 브라우저 또는 Node.js 환경
- 브라우저 환경
- 태스크 큐 (task queue/event queue/callback queue)
- 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시 보관되는 영역
- 호출 스케줄링(콜백 함수를 태스크 큐에 푸시)도 브라우저의 역할
- 이벤트 루프 (event loop)
- 콜 스택에 실행 중인 실행 컨텍스트와 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인
- 콜 스택이 비어 있고 태스크 큐에 대기 중인 함수가 있다면 순차적으로 콜 스택으로 이동시킴 (FIFO)
- 태스크 큐에 일시 보관된 함수들은 비동기 처리 방식으로 동작
- 비동기 함수의 콜백 함수는 태스크 큐에서 대기하다가 콜 스택이 비면 콜 스택에 푸시되어 실행됨
- 이외에도 렌더링 엔진과 Web API 제공 (DOM API와 타이머 함수, HTTP 요청 ajax 등 포함)
- 태스크 큐 (task queue/event queue/callback queue)
- 자바스크립트 엔진은 싱글 스레드 방식이지만, 브라우저는 멀티 스레드로 동작함
- 자바스크립트 엔진과 브라우저 기능 수행은 병행 처리
[출처] 모던 자바스크립트, Deep Dive
괴발개발라이프