[javascript] event loop - 런타임의 이해

목차

• 자바스크립트 엔진
• 런타임 환경
• 정리
• 참조 링크

 

싱글 스레드 기반의 자바스크립트는 어떻게 비동기 처리가 가능할까요?

왜 setTimout 0을 넣어주면 해결이 될까요?

 

 결론부터 얘기하면  web API, task que, eventLoop이 있기 때문에 가능합니다.  이제 자세히 설명해보겠습니다.

---

자바스크립트 엔진

js 엔진

싱글스레드 기반

자바스크립트는 싱글 스레드 기반의 언어입니다. 

하나의 힙, 하나의 콜스택을 가지기 때문에 한 번에 한 가지 일밖에 할 수 없습니다. 만일 서버에 요청하는 함수가 실행되었다면 응답이 올 때까지 다음 동작은 불가능한 것이 원칙입니다.

 

힙 (memory heap) 

동적으로 생성되는 객체들이 할당, 구조화되지 않은 넓은 메모리 공간

 

콜 스택 (call stack)

함수 실행시 push, 함수 종료 시 pop, 콜 스택이 비었다는 것은 전역에 걸친 js 코드 실행이 종료됨을 의미

---

런타임 환경

런타임 (run-time)이란 구현한 코드가 프로그램에서 구동되는 환경을 말합니다.

js run-time

런타임 환경을 보면 싱글 스레드 외에도 3가지 요소가 더 있습니다.

 

• web API
• task que
• event loop

 

각각 어떤 역할을 하는지 보겠습니다.

 

web api

ajax, setTimeout(), 이벤트 핸들러 등록과 같이 웹브라우저에서 제공하는 기능들입니다.

예를 들어 ajax와 같은 함수가 실행되면 js call stack에 push 했다 곧장 pop 합니다. 그 후 웹 API를 통해 브라우저로 위임합니다. 브라우저는 해당 ajax를 js 스레드가 아닌 별도의 스레드에서 처리하도록 합니다. 그렇기 때문에 js는 단일 스레드 임에도 비동기 처리가 가능한 겁니다. js 바깥에서 별도의 스레드를 통해서 처리하기 때문이죠.

실행이 완료되면 task que로 enqueue합니다.

 

task que (=call back que)

web API로부터 실행이 완료된 함수들이 enqueue 되어 들어오는 JS 엔진 내부에 존재하는 큐 (QUE)입니다. 웹 API 스레드로부터 실행 완료된 콜백 함수들이 들어오기 때문에 call back que라고도 합니다.

deenqueue 되는 시점은 js의 call stack이 모두 비었을 때입니다.

 

event loop

task que에 들어온 콜백 함수들을 call stack에 push 하기 위해선 다음 2가지를 계속 확인해야 합니다.

 

1. task que에 enqueue 되어있는 콜백 함수가 있는가.
2. call stack이 비었는가.

 

이 2가지를 계속 확인하는 녀석이 event loop입니다. event loop는 이 2가지를 체크하면서 조건에 맞다면 call stack에 콜백 함수를 push 합니다. 또한 이렇게 매번 하는 일련의 작업을 틱 (tick)이라고 합니다.

 

예시를 들어 ajax를 실행했다면 다음과 같이 동작합니다.

 

1. ajax 함수를 call stack에 push, 바로 pop
2. web API 스레드로 이동 (JS 외부)
3. ajax 실행 후에 task que에 enqueue  (JS 내부)
4. call stack에서 모두 pop 될 때까지 기다림
5. call stack이 비면 바로 call stack에 push 

 

---

정리

js 런타임에 대한 이해가 된다면 이제 서두에 적은 두 의문도 해결될 듯합니다.

 

js가 비동기 처리가 가능한 이유 : js 외부 웹 API 스레드에서 처리하기 때문에

setTimout 0으로 해결되는 이유 : setTimeout 자체가 JS에서가 아닌 웹 API로 위임되기 때문에

---

참조링크

http://latentflip.com/loupe/

http://latentflip.com/loupe/

https://www.youtube.com/watch?v=8aGhZQkoFbQ