JavaScript 비동기 프로그래밍

모던 자바스크립트(저자 이웅모) 내용을 참고하였습니다.

 

💡️ 동기 처리와 비동기 처리

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택(Call Stack)을 갖는다

따라서 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다

싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(blocking)이 발생한다

 

동기 처리 방식

• 현재 실행 중인 작업이 종료할 때까지 다음에 실행될 작업이 대기하는 방식을 동기처리라고 한다
• 장점: 동기 처리 방식은 작업을 순서대로 하나씩 처리하므로 실행 순서가 보장된다
• 단점: 앞선 작업이 종료할 때까지 이후 작업들이 블로킹된다

비동기 처리 방식

• 현재 실행 중인 작업이 종료되지 않은 상태라 해도 다음 작업을 곧바로 실행하는 방식
• 장점: 현재 실행 중인 작업이 종료되지 않아도 다음 작업을 곧바로 실행하므로 블로킹이 발생하지 않는다
• 단점: 작업의 실행 순서가 보장되지 않는다
• setTimeout, setInterval, HTTP요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다

 

💡️ 자바스크립트 비동기 처리 방식

• 자바스크립트는 싱글 스레드로 동작하지만, 브라우저가 동작하는 것을 살펴보면 많은 작업들이 동시에 처리되는 것처럼 느껴진다
• 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프다
• 브라우저 또는 Node.js에서 "태스크 큐"와 "이벤트 루프"를 제공한다

 

자바스크립트 엔진

• 힙
  • 객체가 저장되는 메모리 공간
  • 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다
  • 런타임에 객체의 메모리 공간의 크기를 동적으로 할당한다
• 콜 스택 (단일 호출 스택)
  • 함수가 실행하는 순서에 따라서 할당된다
  • Call Stack에서 수행중인 함수는 끝날 때까지 보장이 된다

 

Web API

• 브라우저에서 제공되는 API ⇒ DOM API, setTimeout, SetInterval, fetch, event listener
• AJAX나 Timeout 등의 비동기 작업을 실행
• 요청받은 비동기 작업을 완료하고, 동시에 전달받은 콜백함수를 Task Queue에 넘겨준다

 

태스크 큐 (task queue/ callback queue)

• 비동기 함수의 콤백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역
• 마이크로 테스크 큐 (microtask queue)
  • Promise에 등록된 콜백(then에 등록한 콜백함수), mutation observer에 등록된 콜백이 담긴다
  • 담겨있는 모든 콜백 함수가 다 실행될 때까지 기다렸다가 넘어감

 

이벤트 루프 (event loop)

• 이벤트 루프는 콜 스택에서 현재 실행중인 실행 컨텍스트가 있는지, 그리고 태스크 큐에 대기 중인 함수(콜백함수, 이벤트 핸들러 등)가 있는지 반복해서 확인한다
• 만약 콜스택이 비어있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다

 

✨ 비동기 처리 실행 순서

1. 함수를 호출하면 콜 스택에 순차적으로 푸시되어 실행된다
2. 만약 setTimeout과 같은 비동기 함수라면 브라우저 환경의 WebAPI에서 실행되고, 비동기 함수의 콜백 함수가 태스크 큐에 담긴다 (노드는 Timer api)
3. 이벤트 루프는 콜스택이 비어있고 태스크 큐에 대기중인 함수가 있다면 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다. 이때 콜 스택으로 이동한 함수는 실행된다
4. 즉, 태스크 큐에 임시 보관된 함수들은 비동기 처리 방식으로 동작한다

 

프로세스와 스레드

프로세스
메모리에 올려져서 실행 중인 프로그램프로세스에 문제가 생기면 해당 프로세스에만 영향을 받는다code, data, stack, heap으로 구성되어 있다code: 코드data: 변수 / 초기화된 데이터stack: 임시 데이터(함수 호출, 로컬 변수 등)heap: 코드에서 동적으로 할당된 데이터가 저장되는 공간

스레드
프로세스 내에서 동작하는 여러 실행 단위자기들만 수행해야하는 함수의 호출을 기억해야 하기 때문에 스레드마다 stack이 존재한다프로세스 내의 code, data, heap 영역을 공유한다단점: 스레드 중 한 스레드만 문제가 생겨도 전체 프로세스가 영향을 받는다