[Javascript Event Loop]

Javascript Engeine vs Redering Engine

 

Redering Engine
HTML과 CSS로 작성된 마크업 관련 코드들을 웹 페이지에 Rendering하는 역할을 한다.

Javascript Engeine
javascript 코드를 해석하고 실행하는 인터프리터 언어이다.

 

자바스크립트 엔진은 크게 세 영역으로 나뉜다.

출처:https://asfirstalways.tistory.com/362

 

Call Stack

자바스크립트는 하나의 호출 스택 (call stack)을 사용한다. 이러한 특징 때문에 자바스크립트의 함수가 실행 되는 방식을 'Run to Completion"이라고 한다. 이는 하나의 함수가 실행되면서 그 함수의 실행이 끝날 때 까지 어떤 다른 task도 수행 할 수 없다.

요청이 들어올 때 마다 해당 요청을 순차적으로 호출 스택에 담아 처리한다.

 

function foo(b) {
  var a = 10;
  return a + b + 11;
}

function bar(x) {
  var y = 3;
  return foo(x * y);
}

console.log(bar(7)); //returns 42

해당 함수가 있을때

1.bar를 호출할 때,bar의 인자와 지역 변수를 포함하는 첫 번째 프레임이 생성됩니다. 
2.bar가 foo를 호출하면 두 번째 프레임이 만들어져 foo의 인수와 지역 변수가 들어있는 첫 번째 프레임의 맨 위에 푸시됩니다. 
3.foo가 반환되면, 최상위 프레임 요소는 bar의 호출 프레임만을 남겨둔 채로 스택 밖으로 빠져나옵니다. 
4.bar가 반환되면, 스택은 비워집니다.
//출처 MDN

 

 

Heap

동적으로 생선된 객체(인스턴스)는 힙(heap)에 할당 된다. 대부분 구조화 되지 않은 '더미'같은 메모리 영역을 heap으로 표현한다.

 

Task Queue(Event Queue)

자바스크립트의 런타임 환경은 처리해야하는 Task를 임시 저장하는 대기 큐가 존재한다. 그것이 바로 Task Queue(Event Queue)이고 Call Stack이 비어졌을때는 먼저 대기열에 들어온 순서대로 수행된다.

 

자바스크립트에서 비동기함수는 Call Stack이 아니라 Task Queue에 삽입된다. 자바스크립트에서는 이벤트에 의해 실행되는 함수들이 비동기로 실행된다. 이것은 자바스크립트 엔진이 아닌 Web API영역에 따로 정의 되어있다. 

 

 

function t1() {
    console.log(t1);
    t2();
}

function t2() {


    setTimeout(function() {
        console.log(t2);
    }, 0);
    t3();

}


function t3() {
    console.log(t3);

}

 

해당 코드의  console창은  이와 같이 찍힌다.

t1
t3
t2

 

1.t1을 호출 했을때  t2가 호출되고
2'.setTimeout함수;가 실행 되고 t2 콜스택에 들어간다음  event queue 영역으로 들어간다.
3.그리고 t3함수가 콜스택으로 들어간다.
4.작업을 마친 t3이 pop되고 t2 =>t1 순으로 pop된다. 이그리고 콜 스택이 비어 있다.
이대, queue에서 이벤트를 가져와 call stack으로 넣는다. 그리고 나서setTimeout이 실행된다.

 

while(queue.waitForMessage()){
  queue.processNextMessage();
}

해당 방식으로 이벤트 루프는 현재 진행중인 task가 있는지, task 큐에 task가 있는지 지속적으로 확인한다. queue에 메시지, 즉 처리해야할 task가 존재하면 while-loop로 들어가 해당 이벤트를 처리하거나 작업을 수정한다. 그러고 queue로 돌아와 새로운 이벤트가 있는 지 파악한다.

 

*인터프리터언어

기계어로 변환하는 과정없이 한줄 한줄 해석하여 바로 명령어를 실행하는 언어를 이다.때문에 빌드 시간이 없다. 컴파일 언어에 비해 속도가 느리다.

ex)R, Python, Ruby

 

 

*컴파일 언어

원시코드(프로그래머가 작성한 소스코드)를 모두 기계어로 변환한 후에 기계(JVM 같은 가상 머신)에 넣고 기계어 코드를 실행한다.

ex)언어로 C, C++

 빌드 과정에서는 인터프리터 언어에 비해 시간이 소요된다다. 하지만 런타임 상황에서는 빠르게 실행할 수 있다.

 

 

 

 

 

 

 

 

 

출처:

한재엽님블로그