-
자바스크립트엔진의 런타임(runtime)프론트엔드/프론트엔드 이론 2020. 9. 18. 12:04
자바스크립트 엔진의 런타임
자바스크립트 엔진은 소스코드를 실행할 때 파싱 후 AST를 생성하고 컴파일러, 인터프리터 방식을 거쳐 기계어를 CPU에 전달하여 소스를 실행한다.
기계어가 CPU에서 실행되면 자바 스크립트 엔진에서 무슨 일이 일어날까?
자바스크립트 엔진 런타임 중 상황
크롬의 V8 엔진 기준으로 자바 스크립트 코드의 런타임 중에는 위와 같은 상황이 벌어진다.
각각의 구조를 설명하면 다음과 같다.
1. Call Stack(스택 메모리, 선입후출, FILO)
Call Stack은 코드 내의 함수를 임시로 저장하고 실행하는 역할을 한다.
자바스크립트는 단일 스레드 프로그래밍 언어다.
즉 단일 Call Stack(콜스택)이다.
그래서 Call Stack 내에서는 코드 내 함수를 한 번에 하나씩 실행하게 된다.
런타임을 하게되면 위 그림처럼 Main()함수가 실행되고, 그 안의 함수들은 차례대로 콜스택에 쌓이게 된다.
그리고 선입후출 구조이기 때문에 가장 최근에 실행된 함수가 가장 먼저 콜스택에서 지워지게 된다.
다만 이때 스택이 꽉차면 스택오버플로 에러가 나기때문에 항상 이것이 일어나지 않게 조심해야 한다.
2. Heap(힙 메모리)
Stack에서 불러서 써야하는 변수, 함수, 저장, 호출 등은 여기서 이뤄진다.
동적으로 만들어진 객체(인스턴스)가 메모리에 할당되는 것이다.
즉 Call Stack에서 함수를 실행 도중에 필요한 각종 자료를 가지고 있다가 함수가 실행되면 자료를 넘겨주는 것이다.
3. Callback Queue(Event Queue, Task Queue)
콜백큐는 비동기 콜백 함수들을 자리다.
무슨 이야기냐면 자바 스크립트는 단일 싱글 스레드 프로그래밍 언어다.
그래서 한 번에 하나의 함수만 순서대로 처리할 수 있다.
하지만 이럴 경우 순서를 기다렸다가 실행되어야 하는 함수들(Click 이벤트 등)은 실행되지 않고 코드의 실행은 멈추게 된다.
콜백큐는 이것을 위해 만든 것이다.
콜스택에 저장된 함수들을 분석해서 만약 이것이 당장 사용해야하는 함수가 아니라면 Web API를 호출한다.
그 뒤에 해당 함수가 든 스택 프레임을 Callback Queue로 이동시킨다.
그리고 Call Stack이 비었을 때 스택 프레임을 Call Stack으로 하나씩 밀어넣는 것이다.
즉 단일 싱글 스레드는 단 하나의 함수만 실행 가능하지만, 별도의 대기 공간을 마련해서 코드가 멈추지 않고 여러 함수가 실행되는 것처럼 만드는 것이 Callback Queue의 역할이다.
'프론트엔드 > 프론트엔드 이론' 카테고리의 다른 글
Object 정리 - window, 객체, object, DOM (0) 2020.09.20 자바스크립트 엔진(JavaScript Engine) (0) 2020.09.18 렌더 트리 (Render Tree) (0) 2020.09.18 CSSOM(CSS Object Model) (0) 2020.09.18 DOM(Document Object Model) (0) 2020.09.18