Call stack && Event loop

1. 자바스크립트

- 우선, 자바스크립트는 싱글 스레드(single threaded) 프로그래밍 언어이다.

싱글 스레드라는 건, 한 번에 하나의 call stack을 갖고 있고,

그 말은 다시 말해 한 번에 하나씩만 일 처리를 할 수 있다는 말

 

2. 자바스크립트의 메모리 구조

자바 스크립트의 메모리 구조는 크게 Heap memory, CallStack Task Queue로  생각해 볼 수 있습니다. 각 영역에서는 무슨 일을 담당하고 이루어질까요? 자바스크립트의 동작은 아래 그림을 통해서 간략하게 알아볼 수 있습니다.

 

메모리힙

• 메모리 할당이 동적으로 일어나는 곳
• 배열을 생성하거나 객체를 생성할 때. 즉, 원시값을 제외한 메모리에 주소값이 할당되어 참조를 해야되는 경우에는 모두 힙에 저장이 된다.

Call Stack, 콜스택

• 코드가 실행되면서 스택 프레임이 쌓이는 곳(스택 프레임은 콜스택에 각각 쌓이는 작업들)
• 싱글스레드이기에 하나만 존재. 즉, 한 번에 하나의 일만 함
• 프로그램의 어느 위치에 있는지를 기록하는 자료구조
• 에러가 발생했을 때 확인할 수 있는 Stack trace는 그 당시의 스택프레임을 추적해 나간 것임.
• Blowing the Stack : 재귀함수로 인해 발생. 스택의 크기를 초과하여 함수가 호출
• 스택에서 실행되는 함수가 처리되는데 긴 시간이 걸린다 > 다른 작업을 할 수 가 없으므로 브라우저가 멈추게 됨(UI작업도 마찬가지)
• 위와 같은 현상을 해결하기위해 비동기 콜백을 사용하고, 그 도움을 주는 요소들이 바로 event queue, event loop 이다.

Event loop

• 이벤트 루프는 콜스택과 이벤트큐를 감시
• 콜스택이 비어있고 이벤트큐에 작업이 있으면 제일 앞에 있는 작업을 콜스택에 추가
• 이러한 반복을 tick이라고 함

Callback queue

• 콜백함수나 비동기적으로 실행되는 함수들이 쌓여 호출되기룰 기다리는 공간.
• 보통 Web API와 연계되어 인자로 넘어간 콜백함수들이 추가됨.
• Web API는 우리가 아는 DOM, AJAX, setTimrOut 같은 호출만 가능한 함수들이 있음.
• 즉, ajax를 이용해 통신을 한다고 하면 인자로 넘긴 콜백함수가 ajax의 함수가 실행되고 난 뒤에 이벤트 큐에 추가되는 방식
• task queue는 priority로 나눈 세개의 queue가 있으며 우선순위는 아래와 같다
  microtask > task > requestAnimationFrame
• 이벤트 루프는 Microtask Queue나 Animation Frames를 방문할 때는, 큐 안에 있는 모든 작업들을 수행하지만, Task Queue를 방문할 때는 한 번에 하나의 작업만 call stack으로 전달하고 다른 Queue를 순회한다.

Task Queue(Macrotask Queue)

• 이 큐는 setTimeout(), setInterval(), setImmediate()와 같은 task를 넘겨받는다.

Microtask Queue

• Microtask Queue는 Promise나 async/await, process.nextTick, Object.observe, MutationObserver과 같은 비동기 호출을 넘겨받는다.
• 그리고 Microtask의 우선순위는 일반 task(또는 macrotask)보다 더 높다.

Animation Frames

• Animation Frames는 requestAnimationFrame과 같이 브라우저 렌더링과 관련된 task를 넘겨받는 Queue이다.