*프로세스는 프로그램을 동작하게 하는 최고의 단위이며, 스레드는 프로세스 안에 있는 프로그램 안에서 동시에 여러 개가 수행될 수 있는 작은 일꾼 단위다.
자바스크립트는 싱글 스레드이다. 때문에 한번에 하나의 일만 처리 할 수 있다. 하지만 자바스크립트가 동작하고 있는 브라우저, 브라우저라는 프로그램에는 여러 개의 쓰레드가 들어있다. 그래서 브라우저, 즉 웹 APIs들을 이용하게 되면 멀티쓰레딩이 가능하다.
또 자바스크립트가 실행하는 환경 위에서는 이런 멀티쓰레딩 뿐 아니라 이벤트 루프를 통해서 좀 더 다양한 동작을 실행할 수 있다.
*Queue: 순차적으로 실행되는 자료구조 FIFO
*Call stack: 함수가 실행되는 과정을 기억하는 자료구조 LIFO
- 웹 APIs를 통해 등록된 콜백함수들은 지정된 시간에 Task Queue로 들어간다.
- fetch api를 통해 받아온 데이터, promise.then에 실행될 함수와 MutationObserver()는 Micro Task Queue에 들어간다.
- requestAnimationFrame(), 렌더트리, 레이아웃, 페인트(주기적으로 호출되는 함수...)는 Render에 있다.
- ...기타 등등
이벤트 루프는 프로세스가 동작하는 동안 빙글빙글 돌면서 콜스택이 비면 각각의 Queue에 있는 함수를 콜스택으로 가져와서 실행 할 수 있도록 도와준다.
콜스택에서 수행중인 함수가 끝날 때까지 이벤트루프는 콜스택에서 멈춰있다가 수행이 끝나면 다시 순회를 한다.
Task Queue에 있는 함수는 콜스택으로 한번에 하나씩만 가져오고 이동한다. Micro Task Queue에서는 큐가 빌 때까지 계속 콜스택을 가져온 뒤 이동한다.
1초에 60fps(16.7ms)는 이미지가 동작하는 것처럼 보이는 시간 개념인데 이벤트 루프는 사실 이렇게 도는 것이 1ms도 걸리지 않을 만큼 빠르게 돌고 있기 때문에 매번 렌더를 업데이트하지 않고 몇바퀴를 돌다가 업데이트하는 방식으로 이루어져있다.
-> 업데이트는 콜백함수들이 모두 끝난 뒤에 이뤄지기 때문에 콜백에 오래 걸리는 작업을 하면 브라우저가 반응 하지 않는다.
Task Queue의 경우 한번에 하나씩 함수를 가져가는 동안 순회하며 렌더에 들려 해당 이벤트를 처리해줄 수 있고 Micro Task Queue의 경우 해당 큐가 끝날 때까지 계속 머물기 때문에 브라우저가 멈춰있다.
드림코딩 엘리님의 강의
