TIL #24 자바스크립트 엔진에서 이벤트 루프(Event Loop)는 어떻게 동작할까?

🔎 자바스크립트의 동작 원리

✔️ 자바스크립트는 싱글 스레드 언어

• 싱글 스레드라는 것은 한번에 한가지 동작밖에 처리하지 못한다는 것이다.
• 이벤트 루프와 스택을 통해 어떤 것을 먼저 처리할 것인지 스케쥴링한다.

✔️ 이벤트 루프 Event Loop

자바스크립트의 동시성(concurrency) 처리 모델의 기본 원리
여러가지 동작을 한꺼번에 처리하려고 할 때의 기본 원리이다. 코드를 실행하고 이벤트를 실행하고 그다음 동작을 실행할 것을 정하는 것이 바로 이 원리이다.

• 자바스크립트 엔진

Memory Heap	Call Stack
자바스크립트 코드의 여러 객체와 값이 저장되는 곳.	함수를 한번 호출하면 스택에 프레임으로 쌓인다.

프레임 하나가 함수 실행 컨텍스트 하나이다. 자바스크립트는 가장 나중에 들어온 실행 컨텍스트부터 처리한다. 그리고 함수가 실행을 종료하면 메모리에서 해제한다. 이 영역은 동기식으로 실행된다.

만약 외부 API에서 콜백함수를 실행해야 될 때가 오면 이벤트 Queue에 메시지를 추가한다. 이벤트 Queue는 들어온 순서대로 처리된다. Queue의 메시지가 처리되면 다시 이것이 콜스택안의 프레임으로 들어가 순차적으로 실행된다.

• ❗️주의할 점!

  Event Queue는 콜 스택이 비어있을 때만 동작한다!

아래 setTimeout을 예시로 생각해보자

function hello() {
  console.log("hello")
}

setTimeout(hello, 2000); // 2초 후 실행

• Step1: call stack에 함수 쌓기

  • setTimeout 함수가 실행되며 setTimeout()함수가 call stack에 쌓인다.

• Step2: APIs로 호출, timeout 동작 시작

  • APIs는 콜백함수를 저장하고 timeout 카운트 시작
  • call stack에 있는 setTimeout함수는 임무를 다해 사라짐.

• Step3: timeout시간이 다 되면 콜백함수를 Queue로 보냄.

  • "콜 스택이 비어있는지" 이벤트루프가 확인하고 콜백함수를 실행한다.
  • 그럼 Queue에 있는 콜백함수가 다시 콜 스택으로 들어간다.

• UI 업데이트, 사용자 이벤트도 모두 같은 스레드에서 처리한다.
  • 콜 스택에서 어떤 함수가 너무 오래 실행되고 있으면 이벤트 루프가 메세지 큐가 콜 스택을 확인하지 않는다.
    • 그렇게 되면 화면이 버벅이게 되는 것이다.
  • 그래서 함수를 작게 만들어서 콜 스택에 오래 들어가 있지 않도록 만드는 거구나...!