JS 실행 환경 정리

브라우저 실행 환경 정리

JS 엔진, 태스크 큐, 이벤트 루프, 환경 API 로 이루어짐

JS 엔진, 태스크 큐, 이벤트 루프, 환경 API 로 이루어짐

• JS 엔진

  콜 스택, 메모리 힙 으로 이루어짐

  • Call Stack

    함수 호출을 Memory Heap 을 참조하며 stack(선입 선출) 구조를 사용하여 작업을 수행함

    실행 환경에 하나만 존재 (JS 가 싱글 스레드 라고 부르는 이유)

  • Memory Heap

    객체의 정보를 저장하는 곳

• Task Queue

  마이크로 태스크, 매크로 태스크로 이루어짐

  Queue 구조를 사용하여 태스크를 처리함

  • 매크로 태스크

    외부 스크립트 로드, 이벤트 핸들러 실행, setTimeout 내부의 콜백 함수 등의 태스크
    

  • 마이크로 태스크

    Promise(핸들러 포함), async/await 사용해 만들어짐
    
    queueMicrotask(func) 사용하여 마이크로 태스크 선언적으로 사용 가능
    

  • 처리 순서

    1. 매크로 태스크 큐의 작업을 하나 실행 함
    
    2. 모든 마이크로 태스크를 실행함
    
    3. DOM 렌더링 처리
    
    4. 유휴 상태 대기
    
    5. 매크로 태스크에 태스크 들어오면 다시 1로 돌아감
    

• 이벤트 루프

  Call Stack 이 빌 때마다 Task Queue 의 작업을 넣어줌

• 환경 API

  런타임 환경에서 제공하는 API 모음

  런타임 환경에 따라 제공하는 API 가 다를 수 있음

콜 스택, 메모리 힙 으로 이루어진 js 엔진 마이크로 태스크, 매크로 태스크로 이루어진 태스크 큐 콜스택이 빌때 마다 콜백 큐의 태스크를 넣어주는 이벤트 루프 환경 api 로 이루어짐