자바스크립트는 정말 싱글스레드?
이건 맞다. 자바스크립트 엔진 즉 대표적으로 v8과 ECMAscript스펙을 구현 하는 엔진은 싱글스레드다
해서 하나의 콜스택으로 이루어져서 하나의 함수만을 실행하게된다.
근데 우리가 보는 웹사이트는 동시성을 지원한다 여러 애니메이션이 실행되면서 기능도 수행하니깐..
어떻게 하는거지? 마술인가?
그것은 이벤트 루프로 동작하는 비동기 방식으로 동시성을 지원 하기 때문이다.
그래서 이게 어떻게 동작하는거지?
위에서 이벤트 루프로 동작하는 비동기방식으로 동시정을 지원한다고 했다.
근데 자바스크립트는 싱글스레드고 ECMAscript스펙에도 이벤트루프에 대해서는 안나온다 그럼 어디서 하는가?
자바스크립트 엔진은 혼자 안돈다.
브라우저와 함께 또는 nodejs엔진과 함께 한다.
여기에 이벤트루프가 있다 덤으로 테스크큐와 webapi도
자바스크립트는 싱글스레드 이기때문에 한번에 한 함수밖에 실행을 못한다.
그럼 만약 setTimeout 같은 함수가 들어오면 어떡하지?
기다리나?
아니다 setTimeout 같은 비동기 webapi가 오면
해당 함수를 브라우저 쪽에서 실행하라고 하고 넘기고 콜스택에서 치워버린다.
그럼 브라우저 쪽에서 setTimeout함수에 할당된 시간만큼 기다리고
해당 콜백함수를 taskqueue에 집어넣는다.
그리고 여기서 이벤트 루프가 나온다
이벤트 루프가 하는 일은 콜스택이 비어있는지 확인하고 비었다면 태스크큐에 있는 함수를 콜스택에 집어 넣어 실행하는 역활을 한다.그래서 비동기적 동시성이 가능한것이다.
그런데 비동기 큐에는 taskqueue만 있는게 아니다.
바로 micro queue 와 animation frames이란 것도 있다.
간단히 말하면
micro queue는 taskqueue 보다 더 우선순위를 가지는 큐다
대표적으로 promise가 비동기 작업을 할때 콜백함수를 이큐에다가 넣는다.
그리고 animation frames는 애니메이션 비동기 함수를 콜스택에 넣는다
즉 각 큐는 다른 우선순위를 위해서 생긴게 아닐까 추측한다.
우선순위는
micro queue > animation frames > task queue 이다.
왼쪽 부터 해당 큐에 콜백함수가 있을시
이벤트 루프가 우선해서 콜스택에 집어 넣는다.
그래서 이게 중요해?!
모른다 아직 나는 실무를 하지않은 능이버섯개발자라서,,
하지만 만약 이 지식이 있다면
프로미스랑 타임아웃 함수가 둘다 비동기니깐
테스트큐대로 실행되겠지? 라고 하면서 코딩을 하다가
프라미스 콜백만 주구창창 실행되는 버그를 사전에 막을수있지않을까?
버그가 터졌을때 가설검증을 위한 하나의 지식도 생기고 말이다
참고자료 (요기가 본체입니다 이걸보세요)
https://meetup.toast.com/posts/89
https://vimeo.com/96425312
https://stackoverflow.com/questions/10680601/nodejs-event-loop
https://ryusm.tistory.com/146
