JS 구동 방식

조양권·2021년 5월 18일
0

JS

목록 보기
2/17

자바스크립트를 조금 더 이해하기위해 자바스크립트의 구동방식에 대해 구글링해보았다. 그 중 이해가 매우 어려운 글도 있었고, 전혀 이해하지 못했던 글도 있었다. 이해가 되었던 부분을 기반으로 기록을 위해 서술하고자 한다.

자바스크립트 엔진

자바스크립트의 엔진 중 유명한 것이 구글의 V8엔진이다. V8엔진은 크롬과 node.js에서 사용된다.

V8엔진은 크게 두 부분으로 구성된다.

  • 메모리힙 : 메모리 할당이 이루어 지는 곳
  • 콜스택 : 코드가 실행되면서 스택 프레임이 쌓이는 곳

런타임

자바스크립트는 많은 사용자들이 이용하는 api가 있는데, 이런 api는 엔진이 제공하는 것이 아니다.

엔진은 중요하지만 엔진만으로 이루어 지는 것은 아니다. 여기엔 wep API, 이벤트루프, 콜백큐등도 자기 역할을 하고 있다.

콜스택

자바스크립트는 싱글 쓰레드 프로그래밍 언어이다. 이는 곧 콜스택이 하나라는 뜻이고, 한 번에 하나의 일만 할 수 있다는 소리다.

콜스택은 우리가 프로그램의 어디에 있는지를 기록하는 자료 구조이다. 우리가 함수안으로 들어가면(호출) 스택의 가장 윗부분에 놓이게되고, 함수에서 돌아오면(함수에서 나오면) 가장 윗부분이 제거된다.

다음의 코드의 콜스택 단계는 이러하다.

function boo(){
   return 'boo'
}  
function foo(){
   var a = boo()
   console.log(a)
}
foo()

(왼쪽부터 아래쪽이 위에서부터 아랫방향)

  1. foo() (foo함수 호출됨)

  2. boo() — foo() (foo함수 호출된 상태, foo함수 내부의 boo함수 호출됨)

  3. console.log(a) — foo() (foo함수 호출된상태, foo함수 내부의 log실행)

  4. foo()

  5. (foo()함수 에서 나오고 콜스택이 비게됨)

스택날림

스택날림은 콜스택의 최대크기에 다다랐을때 나타난다. 이런현상은 재귀현상의 무한루프일때 종종 발생한다.

function foo(){
   foo()
}
foo();

이 함수는 자기 자신을 호출하게 된다. 하지만 별다른 종료조건이 없어 자기를 무한히 호출하게되고, 콜스택에 반복해서 추가된다. 이러한 과정이 진행되면 콜스택의 크기를 넘게되고 브라우저는

이러한 에러를 던진다.

동시성과 이벤트루프

콜스택 내에 수행시간이 긴 함수가 있다면 그 함수에서 나올때까지 브라우저는 아무것도 할 수 없다. 이는 단일 쓰레드의 단점이다. 이런 상황을 ‘블록킹’된다고 한다. 이는 부드러운 UI가 표현되기를 원하는 경우 문제가 될 수 있다.

또한 콜스택 내의 많은 작업을 수행하며 긴시간 동안 응답이 없을 수 있다. 그러하면 대부분의 브라우저에서 에러를 일으키고 사용자에게 해당페이지를 닫을지를 물어보게 된다.

동기방식 이벤트 처리 동작 순서

  1. JS엔진이 JS코드 순차적으로 실행

  2. 함수 호출 시 콜 스택에 넣기

  3. 콜스택에 넣은 함수 실행

  4. 실행된 함수를 콜스택에서 제거

profile
할 수 있는 것이 늘어나는 즐거움

0개의 댓글