이벤트 루프(Event Loop)

https://github.com/moonheekim0118/learning-note/blob/main/javascript/event-loop.md

• JavaScript 의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있음

• 자바스크립트 엔진의 call stack === a thread === 1번에 1개만 처리

• 콜 스택에 들어오는 task 들이 스택에서 pop 되는 시점은?

  • return 절을 만날 때, 즉 함수가 종료 될 때

• 콜스택에서 모든 무거운 작업을 하면, 해당 작업을 하는 동안 브라우저 내 인터렉션이 아예 불가능하다.

  • 왜일까?
  • 브라우저는 1초에 60프레임을 repaint 해야한다.
  • 하지만 콜 스택에 코드가 있으면 렌더링을 하지 못한다. 스택이 비워질 때 까지 기다려야한다.
    • 이 때, 렌더링을 관할하는 렌더 큐는 콜백 함수들보다 더 높은 우선순위를 갖는다.
    • 렌더 큐는 16ms 마다 한번씩 계속해서 렌더링을 하는데 이 때 렌더링 할지 말지 이벤트 루프한테 물어본다 (콜 스택에 작업이 없으면 렌더링 해도 됨!)
    • 따라서 스택에 느린 코드가 들어가게 되면 당연히 렌더링이 블락된다.
    • 엔진이 특정 태스크를 처리하는 동안 렌더링은 되지 않음.

• 또한, setTimeout 에 지정된 delay 타임이 보장되지는 않는다.

  • 왜일까?
  • 만약 delay 타임을 5초로 넣었다면 해당 콜백이 최소 5초 후에 실행된다는 것을 의미한다.
  • 큐에서 콜스택으로 넘어올 때는 콜 스택이 비어있어야만한다. 만약 비어있지 않으면 5초보다 느려질 수 있다.
  • 따라서, 여기서 delay 타임은 최소 보장되는 delay 타임이라고 생각하면 된다.

• delay 타임을 카운팅해주는건 어디서?

  • webApis 에서 해준다.