javascript 동작 원리

승훈·2020년 11월 16일
0

자바스크립트 엔진

대표적인 예로는 Google V8 엔진. V8은 Chrome 과 Node.js에서 사용.

  • Memory Heap : 정보를 저장하는 공간
    즉 변수, 함수 저장, 호출 등의 작업이 발생하는 이 공간이 바로 메모리 힙이다.
  • Call Stack : 실행 중인 코드를 트래킹 하는 공간

가비지 컬렉터

콜스택과 메모리 힙을 배우면서 각각의 공간은 무제한이 아니고 한정적임을 알 수 있다.
자바스크립트는 이 공간을 효율적으로 관리하기 위해서, 더 이상 효용가치가 없다고 판단되는 변수, 함수 등을 함수 실행 종료 후 메모리 힙에서 제거하는 동작을 수행한다. 필요한 데이터만 메모리 힙에 저장함으로써 메모리를 더욱 여유롭게 관리한다. 따라서 자바스크립트는 Garbage Collected Language라고 말할 수 있다.

자바스크립트 호출 스택 이해

위 그림에서 비동기 함수( dom 이벤트, http, settimeout, promise 등.. )는 web API 호출 하여 web api는 콜백 함수를 이벤트 큐 에 밀어 넣는다.
여기서 callback queue는 여러종류가 있다.

task queue: setimeout 같은함수..
microtask queue: promise 같은 함수 ..
animation frames: ui 렌더링 함수..

각기 다른 queue에 밀어 넣는다. 여기서 eventloop 는 call stack이 비워져 있을 때 마다 callback queue들에서 call stack으로 가져온다.
여기서 중요한점은 가져오는 순서가 있다는 점

  • mircotask > animation frames > task 순서

0개의 댓글