동기 처리와 비동기 처리
동작 플로우
함수를 호출 → 평가된 함수코드로 함수 실행 컨텍스트 생성 → 실행 컨텍스트 스택(콜스택) 에 푸시 →함수 실행 →함수 실행 종료 → 스택에서 제거됨
- 호출된 순서대로 스택 자료구조인 실행 컨텍스트 스택에 푸시 되어 실행된다.
- 함수의 실행 순서는 실행 컨텍스트 스택 으로 관리
- 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. ⇒ 싱글 스레드 방식 , 블로킹 발생
동기 처리
다음에 실행 될 태스크가 대기하는 방식
⇒ 실행순서 보장 , 블로킹 단점
비동기 처리
다음 태스크를 곧바로 실행하는 방식을 비동기 처리 라고 한다.
⇒ 블로킹이 발생x , 태스크의 실행 순서가 보장 되지 않는 단점
이벤트 루프와 태스크 큐
자바 스크립트 엔진은 싱글 스레드 이기에 브라우져의 내장기능인 이벤트 루프로 동시성을 지원 따라서 브라우져는 멀티 스레드로 동작한다.
따라서 브라우져와 자바스크립트 엔진이 협력하여 비동기 함수를 실행한다.
자바스크립트 엔진은 2가지 영역으로 구분한다.
-
콜스택 (실행컨텍스트 스택)
- 소스 코드 평가과정에서 생성된 실행 컨텍스트가 추가되고 재고되는 스택 자료구조인 실행 컨텍스트 스택
-
힙
- 객체가 저장되는 메모리 공간, 콜 스택 최상단의 실행 컨텍스트는 힙에 저장된 객체를 참조한다.
- 객체는 원시값 과는 달리 크기가 정해져있지 않아 할당 해야할 메모리의 공간의 크기를 런타임에 동적할당 해야한다 따라서 객체가 저장되는 메모리 공간인 힙은 구조화 되어있지 않다는 특징이 있다.
힙과 콜 스택으로 구성되어있는 자바스크립트 엔진은 콜 스택을 통해 요청된 작업을 순차적으로 시행
비동기 처리에서 소스코드의 평가와 실행을 제외한 모든 처리는 자바스크립트 엔진을 구동하는 환경인 브라우져 가 담당.
호출 스케쥴링을 위한 타이머 설정과 콜백 함수의 등록은 브라우져 또는 node.js가 담당한다. 이를 위해 브라우져 환경은 태스크 큐와 이벤트 루프를 제공한다.
태스크 큐 →매크로 태스큐
setTimeout이나setInterval같은 비동기 함수의 콜백함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역- 프로미스의 후속처리 메서드의 콜백함수가 일시적으로 보관되는 마이크로 태스크 큐도 존재(우선순위)
이벤트 루프
- 이벤트 루프는 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기중인 함수가 있는지 반복해서 확인
- 만약 콜스택이 비고 태스큐 큐에 대기중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기중인 함수를 콜 스택으로 이동. 이때 콜 스택으로 이동한 함수는 실행, 태스크 큐에 일시 보관된 함수들은 비동기 처리 방식으로 동작
결론 : 비동기 함수인 콜백 함수는 태스크 큐에서 대기하다가 콜스택이 비게되면, 다시 말해 전역 코드 및 명시적으로 호출된 함수가 모두 종료하면 비로소 콜 스택에 푸시되어 실행된다.
queueMicrotask()
https://developer.mozilla.org/ko/docs/Web/API/Window/queueMicrotask
