Call Stack
Call stack은 함수의 호출을 저장하는 자료구조이다. 어떤 함수를 호출하면 스택에 쌓고 또 다른 함수를 호출하면 그 다음 스택에 쌓으면서 가장 위에 쌓인 함수를 가장 먼저 처리한다.
콜 스택 사이즈가 감당할 수 없게 넘치게 쌓이면 Maximum call stack 에러가 발생하게 된다.
Memory Heap
Memory Heap은 객체를 저장하는 곳이다. 선언한 변수, 함수가 var1, var2, func1, func2... 들이 있다면 모두 Memory Heap에 저장된다.
Web API
Web API는 브라우저에서 제공하는 API들이다. 위의 그림에서는 자바스크립트의 런타임환경을 설명하고 있기 때문에 web API가 등장했다. 만약 node js 런타임 환경을 설명했다면 다른 API로 표시했을 것이다. 대표적인 예시로는 setTimeout 함수가 있다.
Callback Que
Callback Que는 함수를 저장하는 자료구조이다. Call stack과 다르게 가장 먼저 들어온 함수를 가장 먼저 처리한다. 특정 이벤트에 따른 콜백 함수를 정의하면, 콜백 함수는 Callback Que에 저장된다.
Event Loop
Event Loop는 call stack이 다 비워지면 callback que에 존재하는 함수를 하나씩 호출 스택으로 옮기는 역할을 한다.
참고
- 크로미움은 V8이라는 자바스크립트 엔진과 Blink라는 렌더링 엔진을 사용하는 브라우저
요약
- HTML 마크업을 처리하고 DOM 트리를 빌드 합니다. (DOM 파싱)
- CSS 마크업을 처리하고 CSSOM 트리를 빌드 합니다. (CSS 파싱)
- DOM 및 CSSOM을 결합하여 렌더 트리를 형성합니다. (Attachment)
- 렌더 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산합니다. (Layout)
- 개별 노드를 화면에 페인트 합니다. (Painting)
동작 원리, 구조, 메모리 관리까지 깔끔한 설명
콜스택 및 이벤트 루프 상세 설명
How JavaScript works: an overview of the engine, the runtime, and the call stack
Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & more
