들어가며

• 자바스크립트는 싱글스레드(Single-threaded) 이다.

  → 단일 콜스택을 가진다.

  → 요청이 한줄 씩 동기적으로 처리된다

• 자바스크립트 실행하는 브라우저(프로그램)에는 멀티 스레드

  • 웹 apis들을 이용하게 되면 멀티 스레딩이 가능하다.

  • 자바스크립트가 동작하는 런타임 환경에서 다양한 방식으로 멀티스레딩 비슷한 방법을 사용

    ⇒ 이벤트 루프를 사용할 수 있다.

기본 지식 — Heap, Call Stack

Heap

Call Stack

브라우저 — 자바스크립트 런타임환경

자바스크립트 런타임 환경

Event Loop 는 어떻게 다뤄야하는지?

• 1초에 60프레임을 repaint 하는 게 사람이 보기에 최적화

• 만약, call stack에 뭔가 쌓여있다면?

  • render queue가 작동하지 않는다

    ⇒ 일부러 async 하게 동작시킴으로서 render queue가 작동할 수 있도록 해야한다.

  <aside> 💡 don’t block event loop

  </aside>

  스택에 필요 없는 불필요한 코드로 브라우저가 할 일을 못하게 만들면 안된다.

  → 브라우저가 할일을 못하게 만들면 안된다.

  ⇒ 유동적인 UI를 만들어야한다.

  (이미지나 애니메이션이 너무 잦아졌을 때 주의를 기울이지 않으면 이런 이슈가 발생할 수 있다.)

Reference