02_콜스택과이벤트루프

1. 콜 스택 (Call Stack)

1. 개념

   1. 함수가 호출되면 실행 컨텍스트가 생성되고 추가되는 공간

   2. 함수 내부에서 호출되는 내부함수들은 콜스택에 추가되어 해당 위치에서 실행됨

   3. 함수의 실행이 종료되면 실행컨텍스트가 제거됨

   4. 중단된 시점부터 재시작

2. 문제점

   1. 한 함수가 오래걸리면 브라우저가 멈추어 사용성 측면에서 불편한 서비스가 됨

   2. 하지만 JS가 한 번에 여러 작업을 수행하는 것 처럼 보임

2. 이벤트 루프

1. 기능 및 역할

   1. JS는 단일스레드임에도 불구하고 비동기로 작업을 수행할 수 있게 함

   2. Browser 환경임을 전제하에, 이벤트 루프에 기반한 동시성 모델을 가짐

2. 모던 자바스크립트 엔진

   1. Heap:

      1. 구조화 되지 않은 넓은 메모리 영역

      2. JS의 Reference Type(참조형==객체)는 모두 여기 할당됨

   2. Web API:

      1. 브라우저에서 제공하는 별도의 API (JS아님)

      2. DOM, SVG, Fetch, Canvas, setTimeout 등

   3. Callback Queue:

      1. 비동기 함수가 실행된 후 콜백함수가 대기하는 공간

   4. MicroTask Queue:

      1. ES6에서 도입된 새로운 컨셉

      2. Callback Queue와 동일한 계층에 존재하며 Promise를 통한 비동기 요청시의 콜백 함수가 대기하는 공간

   5. Animation Frame:

      1. requestAnimationFrame의 콜백함수가 대기하는 공간

   6. Event Loop:

      1. Call Stack과 각 작업 Queue들을 감시

      2. Call Stack이 비었을 경우 우선순위에 따라 Queue에서 하나씩 꺼내 CallStack에 추가

      3. 비동기 함수의 콜백 함수 처리 순서: (크롬 브라우저 엔진(V8)기준)

         1. MicroTask (Promise)

         2. Animation Frame

         3. Callback

      4. (ex)

      console.log('start'); // (0)
      setTimeout(() => {console.log('setTimeout')}, 0); // Callback (3)
      requestAnimationFrame(()=>{console.log('rAF')}) // Animation Frame (2)
      Promise.resolve().then(()=>{console.log('promise')}) // MicroTask (1)
      console.log('end'); // (0-1)

      실행 결과는 => 'start' - 'end' - 'promise' - 'rAF' - 'setTimeout'

   7. Zero Delay

      1. setTimeout(()=>{}, 0) 을 하더라도 0ms 이후에 실행되는게 아님

      2. setTimeout 내의 콜백함수는 가장 우선순위가 낮기 때문에 다른 비동기 콜백함수들이 모두 실행되고 난 뒤에 실행됨

      3. 따라서 지연시간은 실행이 보장되는 시간이 아닌 최소 시간임을 알 수 있습니다.