자바스크립트 엔진
엔진의 주요 두 구성요소
- Memory Heap : 메모리 할당이 일어나는 곳
- Call Stack : 코드 실행에 따라 호출 스택이 쌓이는 곳
Memory Heap
데이터를 임시 저장하는 곳으로, 변수나 함수, 함수를 실행할 때 사용하는 값들을 저장
Call Stack
코드가 실행되면 코드 내부의 실행순서를 스택으로 쌓아놓고, 하나씩 순차적으로 진행할 수 있도록 도와주는 곳
single thread
js는 싱글스쓰레드 언어다.즉 호출스택이 하나여서 한번에 한 작업만 처리할 수 있다.
함수를 실행하면 함수실행 컨텍스트가 호출스택 최상단에 위치하고,
함수실행이 끝나면(리턴값을 돌려줄떄), 함수를 호출스택에서 제거한다.
즉 에러가나기까지의 함수실행한 호출스택단계를 보여준다.(호출스택이 최대가되면 스택 날려버리기가 발생)
한개의 호출스택인 싱글쓰레드 기반 자바스크립트는 한계가있다 -> call stack에 처리시간이 엄청긴 함수가 있으면 다른함수들은 실행못하는 block상태가됨
이때 효과적으로 관리하기 위해 필요한것이 web api/task queue/event loop이다
-
Web API : Web API는 브라우저에서 제공되는 API이다. 자바스크립트 엔진에서 정의되지 않았던 setTimeout, AJAX request, DOM event 등의 메소드로 비동기 이벤트를 처리한다.
javascript 싱글 쓰레드의 영향을 받지 않고, 독립적으로 이벤트를 처리할 수 있다. -
Task Queue : 이벤트 발생 후 호출되어야 할 콜백 함수들이 기다리는 공간. 콜백 큐(Callback Queue) 라고도 한다. 자바스크립트에서 비동기로 호출되는 함수들은 호출 스택(Call Stack)에 쌓이지 않고 태스크 큐(Task Queue)로 보내진다.
-
Event Loop : 이벤트 발생 시 호출할 콜백 함수들을 관리하고, 호출된 콜백 함수의 실행 순서를 결정한다.
callback Function
자바스크립트에서는 함수가 실행이 끝나면, 다음에 실행할 일을 정할 수 있는데 이 것을 Callback이라고 부른다.
browser web APIs(오래 걸리는 일 따로 처리하기)
browser web API는 브라우저에서 오래 걸리는 작업을 대신 해주는 역할을 한다.
browser web API는 브라우저 안에 C++ 구현된 쓰레드로 주로 DOM event, AJAX request, setTimeout 등의 메서드로 비동기 이벤트를 처리한다. javascript 싱글 쓰레드의 영향을 받지 않고, 독립적으로 이벤트를 처리할 수 있습니다
task Queue(머리 속에 다음에 할 일 생각하기)
task Queue는 DOM 이벤트, http 요청, setTimeout 같은 Web API이 호출되면
Javascript에서 실행할 Web API의 Callback을 저장한다.
즉 어떤 일이 끝나면 다음에 할 일을 브라우저의 경우 Callback Queue 에 저장 해놓고 사용합니다.
즉, Callback Queue 는 browser web API에 있는 event가 실행되고 나면 javascript에서 실행할 callback을 저장하고 있는 저장소입니다.
setTimeout(function(){
console.log('1초가 지나갔다')
}, 3000)예를 들어 위 코드를 실행하게 되면 call stack에서 바로 실행하지않고, web api로 setTimeout의 콜백함수와 타이머가 들어갑니다
3초가 지나면 task Queue에 콜백함수가 담기게 됩니다.
event loop(할 일 정돈하기)
event loop는 Call Stack 비어있는지를 주기적으로 확인하여 비어있으면 task Queue에서 Callback function을 가져와 Call Stack에 집어 넣는다
마이크로태스크 큐란?
마이크로태스크 큐 는 태스크큐 와 별도의 큐로 후속 처리 메서드의 콜백 함수가 일시 저장된다.
태스크 큐: setTimeout/ setInterval / HTTP 요청 / 이벤트 핸들러 등의 콜백 함수
마이크로태스크 큐:promise 콜백함수
우선순위: 마이크로태스크 큐 > 테스트 큐
이벤트 루프에서 마이크로태스크 큐에 쌓인 태스크를 먼저 콜 스택에 올려준 뒤,
태스크 큐의 잔여 태스크를 콜 스택에 올린다.
