Javascript Borwser Event Loop

소개

웹 브라우저는 Javascript의 런타임 환경입니다.

위 사진은 대표적인 웹 브라우저인 Google Chrome V8엔진의 자바스크립트

이벤트 처리 루프를 도식화한 사진입니다.

주요 웹 브라우저로는 mozilla firefox, MS IE, Edge, Opera, Samsung Internet, Safari가 있습니다.

1.런타임(runtime)이란 무엇인가?

앞서서 웹 브라우저는 자바 스크립트의 런타임 환경이라고 소개 했습니다.

프로그래밍에서 런타임이란 특정 언어가 구동되는 환경입니다.

즉 자바스크립트 코드를 이해하고 해석해서 동작될 수 있도록 해주는 환경이 웹 브라우저인 것이죠!!

2.자바 스크립트(Javascript)의 특징

자바스크립트는 SINGLE THREAD언어 입니다. 우리 눈에는 동시에 여러가지 일을 하는것 처럼 보이지만 사실 한번에 하나의 일밖에 처리할 수 없습니다.

여기서 문제가 생깁니다. 자바 스크립트는 비동기라는 강력한 기능을 제공하는데 어떤 프로세스를 실행할지 내부적으로 정의가 되어야 프로그래밍을 하는 개발자가 여러 상황들을 제어할 수 있겠죠?

그래서 웹 브라우저는 정해진 이벤트 루프를 이용해서 로직을 처리합니다.

Borwser Event Loop

1.Memory Heap

자바 스크립트 엔진은 Memory Heap과 Call Stack으로 메모리가 구성되어 있습니다. Memory Heap에는 프로그램에 선언된 변수, 함수등 지속적으로 사용되는 데이터들이 담겨져 있습니다.

2.Call Stack

Call Stack에는 코드가 실행될때 사용되는 데이터들이 담겨져 있습니다.

특정 함수를 실행 시키면 Call Stack에 할당 되고 함수의 동작이 끝나면 Call Stack에서 해제됩니다.

Stack이라는 이름에서 알 수 있듯이 FILO(First In Last Out)구조를 따릅니다.

※ 최초 함수 호출 전에 익명함수(Anonymous function)이 먼저 실행됩니다.

function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
function multiply(x, y) {
    return x * y;
}
printSquare(5);

브라우저마다 차이가 있지만 통상적으로 Stack은 1만개가 넘게 쌓이면 Stack Overflow가 일어납니다.

//재귀함수
function foo() {
    foo();
}
foo();

3.Web APIs

API는 Application Programming Interface의 약자로 응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능입니다.

위에 그림을 보면 Web APIs는 JS밖에 그려져 있습니다. 즉, 자바스크립트 엔진이 아닙니다. Web APIs는 웹 서버, 브라우저에서 제공하는 프로그래밍 인터페이스 입니다. DOM, Ajax, setTimeout, console등의 기능을 제공해 줍니다.

4.Callback Queue

한가지 일 밖에 못하는 자바스크립트 엔진이 엄청난 리소스를 요청하는 함수를 만났습니다.
이 함수 때문에 다른작업이 블록되고 유저 입장에서는 화면이 멈춘것 처럼 보입니다.
사용자 경험적 측면에서 굉장히 부정적인 상황입니다.

이런 상황을 방지하기 위해서 자바 스크립트에서는 비동적으로 로직을 처리 합니다.
Call Stack에서 실행된 함수를 차근차근 실행하다 비동기로 처리된 함수를 만나면 그 함수의 처리 시간이 1초가 걸리던 0.1초가 걸리던 0.00001초가 걸리던 상관없이 Callbak Queue로 밀어 넣습니다.
그 다음 나머지 Call Stack에 있는 함수들을 실행하고 Call Stack이 다 비워지면 Queue에 대기중이던 비동기 콜백들이 실행 됩니다.

4.Event Loop

function makeCoffee() {
    makeEspresso();
    console.log("makeCoffee");
}

function makeEspresso() {
    dropBeans();
    console.log("makeEspresso");
}

function dropBeans() {
    setTimeout(() => {
        console.log("making espresso")
    }, 300);
    console.log("dropBeans");
}

makeCoffee();

간단한 코드입니다 커피를 만들기 위해서 에스프레소를 호출하고 에스프레소는 원두를 내려서 만듭니다. 원두를 내리는데 2초정도 걸린다고 생각해 볼께요 그러면

Call Stack에서는 이렇게 순서대로 Stack이 쌓입니다. Step 4에서 setTimeout 함수가 실행되면서 Browser가 제공하는 timer Web API 를 호출합니다. 그 후 Call Stack에서 제거됩니다.

Call Stack이 비워지면 Callback Queue에 대기중이던 setTimeout이 Call Stack으로 이동 됩니다.

마지막으로 making espresso를 출력하고 루프가 마무리 됩니다.

console.log

dropBeans 			instrument.ts:113 
makeEspresso			instrument.ts:113 
makeCoffee			instrument.ts:113 
//0.3초 후
making espresso			instrument.ts:113