자바스크립트 엔진(인터프리터)

자바스크립트 엔진이란

자바스크립트 코드를 해석하고 실행하는 인터프리터이다.

브라우저와 같이 자바스크립트를 실행해야하는 곳에 설치가 되어 있어 쉽게 접할 수 있다.

엔진의 종류

• SpiderMonkey : 파이어폭스
• V8 : 크롬, Node.js
• Webkit : 사파리
• Chakra : 엣지

엔진의 구성요소

자바스크립트 엔진

• 메모리 힙 : 변수와 객체의 메모리 할당이 이뤄지는 곳
• 콜 스택 : 코드가 실행됨에 따라 호출 스택이 쌓이는 곳

런타임

예시

사용자의 액션에 따라 Web APIs에 있는 setTimeout(또는 XMLHttpRequest)가 실행된다

setTimeout은 콜백 큐(또는 태스크 큐)에 밀어 넣어진다.

이벤트 루프는 콜 스택과 콜백 큐를 감시하면서, 콜스택이 비워지게 되면 콜백 큐에 대기 중인 항목이 있는지 확인하고, 있으면 스택에 올린다.

 

싱글스레드

자바스크립트는 싱글 쓰레드 기반 언어이기 때문에 자바스크립트 엔진에는 콜 스택이 한개만 존재한다.

이로 인해 자바사크립트 엔진은 한번에 한개의 태스크만 처리가 가능하다.

 

그렇다면 브라우저는 어떻게 우리 눈에 여러 일이 동시에 일어나는 것처럼(애니메이션,request handling,...) 보이게 하는걸까?

그리고 호출스택에 처리 시간이 어마어마하게 오래걸리는 함수가 있으면 브라우저는 페이지를 그리지도 못하고 어느 코드도 실행을 못하게 될텐데 브라우저는 이런 상황을 어떻게 대비를 하고 있을까?

이런화면이 뜰것이다.

이는 바로 자바스크립트의 동시성(Concurrency) 과 이벤트 루프(Event loop)를 통해 해결된다..

즉 비동기 콜백을 활용하는 것이다.

자세한 처리로직은 상단의 그림으로 이해할 수 있을것이다.

---

논외

js파일 html에 넣을 때

 

브라우저는 렌더링 도중 자바스크립트와 만나게 되면 이에 대한 해석과 실행이 완료될때까지 렌더링을 멈춘다.

그렇기때문에 렌더링이 끝난 후 실행하기 위해 바디 하단에 스크립트를 두는것이 안정적이다.

1. head에 삽입되는 경우
   • 무거운 스크립트가 실행되는 경우 렌더링에 방해가 될 수 있다.
   • 제이쿼리와 같은 설정을 위한 스크립트들이 사용된다.
   • DOM이 필요할 경우 document.onload 를 사용하여, load 이벤트 발생 시, 실행되도록 할 수 있다.

• 바디 하단에 삽입되는 경우
  • 브라우저의 렌더링이 완료 된 후 실행되기 때문에, DOM을 조작할 수 있다.

부득이 head 태그에서 사용해야한다면 이러한 문제를 해결하기위한 추가된 속성이 있다.

바로

이런화면이 뜰것이다.

async와 defer이다.

<script async src="myAsyncScript.js" onload="myInit()"></script>
<script defer src="myDeferScript.js" onload="myInit()"></script>

async또는 defer속성이 추가된 스크립트는 렌더링을 방해하지 않는다.

• async
  • 외부 스크립트에만 사용할 수 있으며, 스크립트를 내려받는 즉시 실행한다.

• defer
  • 비동기적으로 스크립트를 다운로드 하며, 렌더링이 완료된 후 스크립트를 실행한다.