[JS] Engine, Event Loop

1. JS Engine

자바스크립트 엔진은 Memory Heap과Call Stack으로 구성되어 있다
 ex) 구글의 V8 Engine(C++로 구성), WebKit Engine(Safari)이다.

 

자바스크립트는 단일 스레드 (sigle thread) 프로그래밍 언어인데,
이 의미는 Call Stack이 하나라는 이야기이다.

• Memory Heap : 메모리 할당이 일어나는 곳
  (ex, 우리가 프로그램에 선언한 변수, 함수 등이 담겨 있음)
• Call Stack : 코드가 실행될 때 쌓이는 곳. stack 형태로 쌓임.

 Stack(스택) : 자료구조 중 하나, 선입 후출(LIFO, Last In First Out)의 룰을 따른다

 

2. Meomory Heap

Memory Heap은 객체를 저장하는 곳이다. 예제에서 선언한 함수 func1, func2, func3는 모두 Memory Heap에 저장된다.

 

 

3. Call Stack

 함수 호출은 프레임들의 스택을 형성합니다. 호출 순서대로 스택에 적재합니다.

주의할 사항은 재귀를 사용할 경우 overflow 발생 위험이 있습니다.

 

 Tail recursion(꼬리 물기 최적화 : 다음 연산에 필요한 값을 다음 루틴에 넘기면 호출 당했던 곳으로 돌아와 연산을 거칠 필요가 없다) 과 같은 방법으로 회피는 가능하다고 하지만 아직 V8에서는 지원을 하지 않는 것인지 아래코드를 수행해도 오버플로우는 피할 수 없었다.

function factorial2(n) {
  function cal(n, result) {
    return n === 0 ? result : cal(n - 1, n * result);
  }

  return cal(n, 1);
}

> Uncaught RangeError: Maximum call stack size exceeded

 

4. Web API

그림의 오른쪽에 있는 Wep API는 JS Engine의 밖에 그려져 있다.
즉, 자바스크립트 엔진이 아니다.

Web API는브라우저에서 제공하는 API로, DOM, Ajax, Timeout 등이 있다.
Call Stack에서 실행된 비동기 함수는 Web API를 호출하고,
Web API는 콜백함수를 Callback Queue에 밀어 넣는다.

 

Browser API는 웹 브라우저에 내장되어 있으며, 브라우저 및 주변 컴퓨터 환경에서 데이터를 제공하거나 복잡한 작업을 수행 할 수 있습니다. 예를 들어, Web Audio API 는 브라우저에서 오디오를 조작하기 위한 Javascript 구성을 제공합니다.
웹 API 소개 - MDN web docs

 

• 웹 콘텐츠 조작을 위한 DOM
• 서버에서 데이터를 가져오기 위한 XMLHttpRequest 및 Fetch
• 그래픽 그리기 및 조작을 위한 Canvas 및 WebGL
• 오디오 및 비디오 조작을 위한 Web Audio 및 WebRTC
• 웹 브라우저에 데이터를 저장하기 위한 Web Storage 

 

5. Callback Queue

비동기적으로 실행된 콜백함수가 보관 되는 영역이다.
예를 들어 setTimeout에서 타이머 완료 후 실행되는 함수(1st 인자),
addEventListener에서 click 이벤트가 발생했을 때 실행되는 함수(2nd 인자) 등이 보관된다.

• Queue(큐) : 자료 구조 중 하나, 선입선출(FIFO, Frist In Frist OUT)의 룰을 따른다.

 

 

 

function fnc1() {
	for(var i=0 ; i < 500000000 ; i++) { 

	}
    console.log("fnc1");
}

function fnc2() {
    setTimeout(()=>  console.log("fnc2"),1000);
}

 

 

 

> fnc2()수행 후 fnc1()수행하면 fnc1()의 수행을 마친 다음 fnc2()의 console.log가 수행된다.

즉, 1초 그 이상이 걸릴 수 있다.

 

 

6. Event Loop

 Event Loop는 call stack이 다 비워지면 callback que에 존재하는 함수를 하나씩 호출 스택으로 옮기는 역할을 한다.

 

참고 
출처:
https://2dubbing.tistory.com/87 [비실이의 개발 성장기]

https://jongbeom-dev.tistory.com/119