js엔진 구성 요소

■브라우저 엔진의 종류

- js엔진

- js로 작성된 코드를 해석하고 실행하는 '인터프리터'

- 대표적으로 구글의 V8이 있음

- heap, call stack, task queue, event loop, background로 구성

- setTimeout, ajax, dom 등의 몇몇 요소들은 js 엔진 소속이 아닌 브라우저 소속.

이들을 WebAPI 라고 부름

- rendering엔진 (또는 layout엔진)

- html과 css로 작성된 마크업 관련 코드를 rendering하는 엔진

■js엔진 구성 요소

- heap

- 동적으로 생성된 객체(인스턴스)가 할당되는 공간

- call stack

- 호출된 메소드가 프레임이라는 단위로 쌓이는 공간

- 여러 메소드가 쌓이게 되면 가장 최근에 호출된 메소드부터 차례대로 실행되고,

실행이 끝나면 해당 함수는 호출 스택에서 제거

(맨 위에 위치한 프레임(함수)이 현재 실행되고 있는 함수라는 것을 알 수 있음!)

- 보통 js 에러가 나면 브라우저 개발자도구에서 stack trace를 볼 수 있음.

재귀함수가 굉장히 많이 호출되면 스택이 가득차게 되어 Exception이 발생할 수 있다.

(보통 프레임이 1만개 넘게 쌓이면 Exception이 난다고 한다)

- task queue, event loop, background

- 이 둘을 설명하려면 js의 싱글 스레드 환경에 대해서 이야기를 할 필요가 있다.

- 대부분의(?) 브라우저는 싱글 스레드 환경으로 이루어져 있다.

js는 브라우저 기반으로 실행되므로 js는 싱글 스레드 기반이다. (java는 멀티 스레드 기반)

- 싱글 스레드이기 때문에 데드락 등의 멀티스레드의 고민거리들을 신경쓰지 않아도 되지만

느린 실행속도 등의 성능 문제가 발생하기 쉽다.

- 예를 들어 html의 내용을 생성/수정하는 js 메소드가 있고 그 메소드의 수행시간이 

엄청나게 길다고 할 때, 생성/수정한 내용들이 html에 즉각 반영되지 않고 해당 메소드가 

끝나기를 기다렸다가 반영되게 된다. rendering engine이 js engine의 작업(메소드 실행)이 

끝나기를 한참 기다렸다가 실행되는 것이다.

- js가 싱글 스레드이기 때문에 call stack도 단 하나만 존재하고, 그래서 새로운 컨택스트가 

시작되는 지점이 하나밖에 없어 병렬실행이 불가능한 것이다. 위 예시 외에도 병렬 실행 

흐름이 필요한 경우가 많이 있다. (ajax, setTimeout, eventListener, FileReader 등등)

- 위와 같은 싱글 스레드의 한계를 극복하기 위해(?) 현재 실행 흐름, 즉 현재 컨택스트와 

별개의 컨택스트가 실행되는 환경인 비동기 방식이 탄생했다. (추측!)

- tack queue , event loop , background라는 개념이 바로 그것을 위한 환경이다.

- setTimeout을 예로 들면, 여느 일반 메소드와 같이 setTimeout도 스택에 쌓이게 된다.

setTimeout은 스택에 쌓이자마자 매개변수로 받은 콜백 메소드와 대기 시간을 

background로 전달하고 바로 스택에서 지워진다. 그리고 다음 메소드가 스택에 쌓여 

나머지 로직들이 진행된다.

- background는 전달받은 시간이 지나면 콜백 메소드를 task queue로 보낸다.

setTimeout으로 인해 전송된 콜백 메소드가 많을 경우, 대기 시간이 끝나는 순서대로 

task queue로 전송한다.

- event loop는 스택이 비워졌는지 '항상' 체크하고 있다. 스택이 비워지면(main 컨택스트가 

종료되면) 비로소 task queue에 전송된 콜백 메소드들을 입장한 순서대로 스택으로 보낸다.

- 스택이 비워지지 않으면 event loop는 task queue에 저장되어 있는 콜백 메소드를 스택으로 보내지 않는다. setTimeout에서 설정한 대기 시간이 지나도 콜백 메소드가 실행되지 않으면

이 경우를 체크해봐야 한다.

- 또한 대기 시간을 0초로 설정해도 위 과정들을 똑같이 모두 거치기 때문에 사실 0초보다 

아주 약간 시간이 더 걸린다. 그리고 스택에 쌓인 메소드들의 성능이 느려서 스택이 

비워지는 시간이 엄청 늦어지면 지정한 시간보다 늦게 실행될 수도 있다. 콜백 함수를 

사용하는 것들은 대부분 백그라운드를 사용한다.

https://blog.naver.com/PostView.nhn?blogId=tmondev&logNo=220937034820&categoryNo=6&parentCategoryNo=0&viewDate=&currentPage=9&postListTopCurrentPage=1&from=postList&userTopListOpen=true&userTopListCount=5&userTopListManageOpen=false&userTopListCurrentPage=9

https://www.zerocho.com/category/JavaScript/post/597f34bbb428530018e8e6e2

http://blog.naver.com/tmondev/220928561593

https://joshua1988.github.io/javascript/

https://new93helloworld.tistory.com/137

https://andamiro25.tistory.com/176