자바스크립트는 싱글 스레드

→ 그래서 네트워크 통신 등 오래 걸리는 통신을 중간에 넣으면 하염없이 통신이 끝나기를 기다려야함

→ 블로킹 되면 UI도 리렌더링 되지 않음. 콜스택에 코드들이 남아있으면 브라우저는 다른 일을 할 수 없음

→ 그런데 어떻게 자바스크립트에서 비동기 처리가 가능한지??

→ 자바스크립트는 브라우저 위에서 작동함. 브라우저는 Web API(ex.setTimeout)도 같이 제공함

Concurrency & the Event Loop 동시성과 이벤트루프

Web API

자바스크립트 런타임 환경에 존재하는 별도의 API, 작성된 코드 중간에 갑자기 끼어들어서 작동할 수 없음

⇒ 모든 Web API는 작동이 완료되면 콜백(web api에서 작동되는 함수)을 태스크 큐에 밀어넣음

⇒ 이벤트 루프가 콜 스택과 태스크 큐를 주시하면서 스택이 비어 있으면, 큐의 첫번째 콜백을 스택에 쌓음

⇒ 자바스크립트 엔진인 스택에 들어오면 실행시킴!

setTimeout

setTimeout 0초를 걸어도 스택이 비어있을 때 까지 콜백함수가 기다리기 때문에 실제로는 딱 0초 후에 실행되는게 아님 , 딜레이되는 최소 시간만 지정할 수 있는 것임

AJAX 요청

AJAX 요청은 자바스크립트 런타임이 아니라 Web API에서 실행됨 > 비동기로 동작하기 때문에 AJAX 요청이 실행되지 않아도 (스택이 비워져서 이벤트 루프가 태스크 큐에서 해당 함수를 스택으로 옮기지 않아도) 스택에 있는 함수들은 정상적으로 작동함)

렌더링 큐 rendering queue

브라우저는 기본적으로 1초에 60프레임을 리페인트하는게 이상적임.
브라우저는 자바스크립트로 하는 무언가로 인해 제약 받음.
→ 스택에 코드가 있으면 렌더링 못함, 렌더도 하나의 콜백처럼 작동해서 스택이 비워질 때까지 기다림
하지만 콜백에 비해 더 높은 우선순위를 가짐. 매 16밀리세컨드마다 큐에 들어가고 스택이 깨끗해진 후에야 렌더링 함. → 그래서 콜 스택에 오래 걸리는 함수 들어가면 렌더링 못함. → 스택에 필요 없는 느린 코드를, 혹은 굉장히 좁은 간격으로 반복되는 코드를 쌓으면 브라우저가 할일 못함 → 매 몇 초마다, 혹은 유저가 스크롤을 멈출 때 까지 작업량을 줄인다던지 하는 방식으로 렌더링 큐를 관리하는 것도 필요함