자바스크립트 동작원리
JavaScript는 CallStack, Event Queue를 이용하여 Single Thread 기반으로 동작한다.
Single Thread 기반에서는 단 하나의 CallStack만 존재하기 때문에 네트워크 요청 등 비용이 많이 드는 연산을 수행하게 되면 매우 비효율적으로 동작된다. 이러한 문제점을 어떻게 해결해나갈까?
자바스크립트
자바스크립트 엔진은 실행할 전체 함수를 실행 직전에 간단히 변수 및 함수 선언들만 스캔하는 JIT 컴파일 과정을 거치기 때문에 컴파일 과정을 갖는 인터프리터 언어라고 부릅니다.
자바스크립트 엔진
자바스크립트 엔진의 대표적인 예는 Google V8 엔진입니다. V8 은 Chrome 브라우저와 Node.js에서 사용합니다.
엔진의 주요 두 구성요소는
- Memory Heap : 메모리 할당이 일어나는 곳. 자바스크립트와 같은 하이레벨 언어에서는 자동으로 메모리를 할당하고 불필요하다고 판단되면 자동으로 제거하는데, 이를 '가비지 컬렉션'이라고 합니다.
- Call Stack : 코드 실행에 따라 호출 스택이 쌓이는 곳입니다.
런타임
호출 스택(Call Stack)
호출 스택은 메모리에 존재하는 공간 중의 하나로, FILO(선입 후출) 자료구조로 함수 호출 단위를 스택 프레임에 쌓아가고, 각각은 호출 함수에 대한 복귀 주소를 기억하고 있습니다.
Web APIs
자바스크립트 엔진 밖에서 동작하는, 웹 브라우저에 내장된 API입니다
브라우저는 Web APIs, Event Table, Callback Queue, Event Loop 등으로 구성되어 있습니다
- Web API에는 DOM, Ajax, Timeout(setTimeout) 등이 있으며,
- Web API는 콜백함수를 Callback Queue에 밀어 넣습니다.
setTimeout(()=>{
console.log('hello world');
},500);예를 들어, 위 코드처럼 setTimeout 함수는 WebAPI 함수인데, 해당 함수의 인자로 콜백 함수(console.log를 찍는 함수)를 넣는 행위 자체가 Callback Queue로 이동시키는 것입니다. 위 코드를 보면 500ms를 지정했으므로, 0.5초 뒤에 Callback Queue로 들어가게 됩니다다.
Callback Queue
자바스크립트의 런타임 환경의 Callback Queue는 처리할 메세지 목록과 실행할 콜백 함수들의 리스트입니다.
DOM 이벤트, http 요청, setTimeout 같은 비동기 함수는 Web API를 호출하며 Web API는 콜백 함수를 Callback Queue에 밀어 넣습니다.
Callback queue는 대기하다가 Call Stack이 비는 시점에 이벤트 루프를 돌려 해당 콜백 함수를 스택에 넣습니다.
Event Loop
이벤트 루프의 기본 역할은 큐와 스택 두 부분을 지켜보고 있다가 스택이 비는 시점에 콜백을 실행시켜 Callback Queue에 있는 함수들을 콜 스택으로 하나씩 넘겨 실행시켜 주는 것입니다.
자바스크립트는 Event Loop를 이용해서 비동기 방식으로 동시성을 지원합니다.
Event Loop는 Call Stack과 Callback Queue의 상태를 체크하여,
Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어넣습니다.
이러한 반복적인 행동을 틱(tick) 이라 부릅니다.
출처:
https://helloinyong.tistory.com/291?category=832496