JavaScript 동작 방식 (Event Loop)

 

0. 개요

JS 가 싱글 스레드로 돌아간다는 것을 알고 AJAX 처럼 비동기적 기능이 어떻게 돌아가는지 의문을 가지다 알게된 부분을 아래글로 정리하게 되었습니다. 

 

출처:  https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

 

1. 동기적 동작 방식

자바스크립 엔진(v8 기준) 은 메모리 힙과 호출 스택(call stack) 으로 구성되어 있습니다. 위 그림에서 진하게 박스표시 된 부분입니다.

 

JS 는 스크립트 언어로서 스크립트를 한줄씩 위에서 부터 읽어나가며 호출 스택에 함수를 쌓고 실행하여 빠져 나가는 형태로 실행됩니다. 만약 함수안에서 다른함수의 호출이 있을경우 호출 스택에 순서대로 아래서부터 위로 쌓아나가고 다시 위에서부터 실행되어 호출 스택을 빠져나가게됩니다. (LIFO 를 따름)

 

 

2. 비동기적 동작 방식

참고 ) 아래 JS 동작원리는 web APIs(node 에서는 백그라운드) 테스트큐 , 이벤트 루프를 생략한 간소한 설명입니다.

 

그러나 만약 setTimeout 함수가 중간에 사용되었을때 상황을 살펴보면 중간에 비동기처리방식이 필요하므로 위의 설명으로는 이해가 어습니다. (setTimeout 은 일정 시간 뒤에 input 한 함수를 실행시키는 비동기 함수입니다.)

 

이때 부터는 JS 엔진을 넘어 브라우저에서 제공하는 API 를 이용하게 됩니다.

call stack 에서 비동기 방식의 함수를 발견하면 이는 곧 WEB API 에 Stack 형태로 쌓이고 setTimout의 일정시간을 기다린뒤 테스크큐(call back queue)에 쌓입니다. 그리고 이벤트 루프를 통해 자바스크립 엔진의 CallStack이 비어 있을때 까지 기다렸다가 비었다는 시그널을 얻고 실행 내용이 Call Stack 에  쌓이고 실행을 마치게 됩니다. 

 

 

위의 설명대로 이벤트루프가 함수를 태스크 큐에서 호출 스택으로 올리기 위한 조건으로 호출 스택이 비어있어야 한다고 했으므로 호출스택이 많이 쌓여 있다면 setTimout 에 설정된 시간이 지난후에도 바로 그안에 넣어 놓은 함수가 실행되지 않을 수 있다.

 

3. 정리 

• 동기적 동작
  • V8 엔진에서 함수가 실행되면 Call Stack 에 쌓여 실행하고 변수는 Memory heap 에 저장된다.
• 비동기적 동작
  • 비동기 함수가 실행되면 WebApi 가 호출 된다.
  • WebApi 는 비동기함수의 콜백함수를 CallbackQueue 에 밀어넣는다.
  • Ebent Loop는 Call Stack이 빈상태가 되면 Callback Queu에 있는 가장 앞의 콜백을 Call Stack에 쌓는다.

 

 

참조 : js 동작원리