JS와 event loop

JS는 어떤 언어인가?

JS는 Single threaded language, 싱글 스레드 언어이다.
이게 뜻하는 바는 무엇일까? 이 말을 해석해보면 다음과 같다.
하나의 스레드 = 하나의 콜스택 = 동시에 하나의 코드만 실행가능

 

callStack

JS의 영역 중 call stack은 코드를 실행하는 영역이다.
메서드를 호출하면 call stack에 차례대로 쌓이게 되고, return이 일어나면 stack에서 제거된다.
위 사진을 통해 call stack은 한 번에 하나씩 메서드를 처리하는 것을 알 수 있다.

 

그렇다면 네트워크 요청[XmlHttpRequest]은 어떻게 처리될까?
지금까지 우리가 배운 대로라면, 요청을 보내고 응답이 올 때까지 기다릴 것이다.
그리고 응답이 와야 다음 코드를 실행할 것이다.
이는 성능을 저하시켜, 프로그램을 느리게 만들 것이다.
그래서 JS는 비동기 콜백을 통해 문제를 해결했다.

 

비동기 콜백

비동기 콜백이 무엇인지 다음 그림을 통해 알아보자!

callback

setTimeout 함수가 call stack에 쌓인 후 web api로 위임되는 것을 볼 수 있다.

web api는 2초를 카운트하고 callback queue에 callback 함수를 집어넣는다.

event loop는 call stack이 비어있으면, callback queue에 쌓여있는 callback 함수들을 차례대로 callstack 영역으로 보낸다.

(event loop는 call stack과 callback queue 사이에서 동작한다고 생각하면 된다.)

그 후 callstack이 callback 함수들을 실행시키게 된다.

(그래서 setTimeout같은 경우 설정한 시간 후에 정확히 실행되지 않을 수도 있다.
왜냐하면 call stack이 완전히 비어진 후 setTimeout을 통해 설정한 callback 함수가 실행되기때문이다.)

 

V8

위 그림은 V8의 그림이다.

JS는 브라우저나 NodeJS와 같은 환경에서 실행되는데,
V8은 크롬 브라우저에서 만든 JS 실행엔진이다.
V8 그림을 보면 WebAPI를 통해 DOM, AJAX, setTimeout 등의 비동기 콜백 작업이 이뤄진다는 것을 알 수 있다.

 

렌더링과 콜백

렌더링도 비동기 콜백과 같은 메커니즘으로 이뤄진다.
다음 영상을 보면 쉽게 이해될 것이다.

렌더링 작업은 16.6밀리초마다 render queue를 통해 이뤄진다.
render queue는 callback queue보다 높은 우선순위를 가진다.
하지만 call stack이 완전 비워져야만, event loop에 의해 call stack으로 넘겨지면서 실행되는 것은 callback queue와 동일하다.
때문에 call stack이 특정 작업에 의해 오래 점유되면 렌더링 작업도 실행되지 않는다.

해당 현상을 확인할 수 있는 것이 위의 영상이다.

위 코드처럼 for 안에서의 작업이 오래 걸린다면 setTimeout을 사용하는 것이 좋다.
setTimeout을 사용하지 않은 for문은 call stack을 점유하고,
결과적으로 렌더링이 원활하게 실행되지 않는다.
하지만 setTimeout을 사용하면 중간중간 화면이 렌더링되는 타이밍이 생기는 것을 볼 수 있다.

 

(최선을 다해 설명해봤지만, 역부족인 거 같다 ㅜㅜㅜ)
참고영상: 어쨌든 이벤트 루프는 무엇입니까? | Philip Roberts | JSConf EU