신입 개발자에서 시니어 개발자가 되기까지

[Javascript Deep Dive] 42장 이벤트 루프 본문

책읽기/Javascript Deep Dive

[Javascript Deep Dive] 42장 이벤트 루프

Jin.K 2022. 11. 2. 00:13

1. 자바스크립트 엔진

a. 자바스크립트 엔진이란?

    - Javascript로 작성한 코드를 해석하고 실행하는 인터프리터이며, 싱글 스레드로 동작한다. 
    - 싱글 스레드로 동작한다는 것은 한 번에 하나의 태스크만을 처리할 수 있다는 뜻이다. 
    하지만, 비동기 함수, 애니메이션 등은 다른 코드들과 동시에 동작하는데, 이러한 자바스크립트의
    동시성을 처리해주는 것이 브라우저의 이벤트 루프다.

b. 엔진을 이루는 두 영역

    i. 콜 스택
        - 자바스크립트는 단 하나의 호출 스택(call stack)만을 이용하고, 하나의 함수가 실행되고
        종료되어야 다른 task를 수행할 수 있다.
        - 함수가 실행되면 콜스택에 push되고 실행이 끝나면 콜스택에서 pop되어 제거된다.
    ii. 힙
        - 동적으로 생성된 객체는 heap에 할당된다.(이는 변수의 메모리 할당에 대해서 다뤘었다)

2. 브라우저환경

a. 큐

-큐는 비동기 함수나 이벤트 핸들러를 일시적으로 보관하기 위해 브라우저 환경에서 제공하는 영역이다.

        i. 마이크로태스크 큐
            - promise 후속처리 메서드(then, catch, finally)의 콜백함수를 저장하는 큐
        ii. 태스크 큐
            - 처리해야하는 태스크를 임시 저장하는 대기 큐가 존재하는데 이를 task Queue라고 부른다.
            대표적인 태스크로는 비동기함수 내의 콜백함수다.
            setTimeout,setInterval, UI렌더링, requestAnimationFrame 등의 task들이 태스크 큐에 저장된다.

b. 이벤트 루프

-큐와 스택을 번갈아 확인하며 동시에 여러 태스크를 실행하기 위해 브라우저 환경에서 이벤트 루프를 제공한다.

        i. 콜 스택에 현재 실행중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수
            (콜백 함수, 이벤트 핸들러 등)이 있는지 반복해서 확인한다.
        ii. 콜 스택이 비어있고, 태스크 큐에 대기 중인 함수가 있으면 이벤트 루프는 선입선출로
            태스크 큐에 있는 함수를 콜 스택으로 이동시킨다.
        iii. 우선순위는 마이크로태스크 큐가 태스크 큐보다 높다.