Javascript Call Stack, Callback Queue, Event Loop

이번에 30초 마다 API를 호출하는 코드를 구현하면서 setInterval 함수를 사용하였다. 

사용법은 알고 있었는데 setInterval이 어떤 건지 찾아보다가 비동기와 관련된 개념들이 나와서 정리를 하게 되었다. 

따라서 오늘은 비동기 개념에 등장하는 Call Stack, Callback Queue, Event Loop에 대해 알아보았다. 

 

본론에 들어가기 전에 브라우저에서 HTML 내부 Javascript로 작성된 코드가 실행되는 과정에 대해 잠시 정리해보자. 

---

🔎 Javascript 실행원리

웹 브라우저는 아래와 같은 구조로 구성된다. 

• 사용자 인터페이스: 검색창, 뒤로가기/앞으로가기 버튼, 새로고침 등 브라우저 프로그램 자체 GUI
• 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
• 렌더링 엔진: 요청한 콘텐츠(HTML, CSS 등) 파싱(parsing)하여 표시
• 통신: HTTP 요청과 같은 네트워크 호출
• 자바스크립트 엔진: 자바스크립트 코드 해석 및 실행
• UI 백엔드: 기본적은 위젯을 그리는 인터페이스로 플랫폼에서 명시하지 않은 일반적인 인터페이스
• 자료저장소: 로컬 스토리지, 쿠키 등 브라우저 메모리를 활용하여 저장하는 영역

 

위의 구성에서 JS 엔진이 HTML 내 <script>로 감싼 Javascript 코드를 실행하는 영역이다. 

렌더링 엔진이 HTML 문서를 한 줄씩 순차적으로 파싱하다가 자바스크립트 파일을 로드하는 script 태그를 만나면 DOM 생성을 일시 중단한다. script 태그의 src에 정의된 자바스크립트 파일을 서버에 요청하여 응답받으면 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에게 제어권을 넘긴다. 

 

자바스크립트 엔진이 코드를 읽고 실행하는 원리는 아래와 같다. 

 

🔎 Javascript 엔진

Javascript 엔진은 브라우저 내에 내장되어 있으며 그게 Memory Heap과 Call Stack 두 가지 영역으로 구분이 가능하다. 

 

Memory Heap

데이터를 임시 저장하는 곳으로 함수나 변수, 함수를 실행할 때 사용하는 값들을 저장한다. 

해당 부분에서 더이상 사용되지 않는 변수나 데이터를 비워주는 GC가 있다. 

 

Call Stack

코드가 실행되면 순서를 기억해 놓고, 하나씩 순차적으로 꺼내서 실행할 수 있도록 도와주는 공간

Stack 자료 구조형태로 LIFO 원칙을 따른다. 

Call Stack에 들어간 함수 형태는 아래 .js 코드를 실행한 결과와 같다. 

 

function add(a, b) {
    return a + b;
}

function average(a, b) {
    return add(a, b) / 2;
}

console.log(average(10, 20));

 

• 위의 코드를 실행하면 Call Stack에는 console.log → average → add 순으로 쌓이며, 실제 실행시에는 add → average → console.log 순으로 실행된다.
• 실제로 코드를 실행했을 때, 다음에 실행되어야 할 코드를 순서대로 기록을 하며, 순차적으로 코드를 실행할 수 있게 된다.
• 이 Call Stack의 저장공간이 가득 차서 넘치는 현상을 stack over flow 라고 한다.

 

🔎 Call Stack, Callback Queue, Event Loop

Javascript는 싱글 스레드이기 때문에 call stack에 10초 걸리는 작업이 하나라도 있으면 모든 작업은 10초 + a로 느려진다. 그래서 필요한게 Event Loop와 Callback Queue, Browser Web API이다.

• 자바스크립트는 단일 스레드 기반의 언어로 한 순간 하나의 작업만을 처리할 수 있다.
• 자바스크립트는 비동기로 동작하기 때문에 단일 스레드임에도 동시에 많은 작업을 수행할 수 있다.
  • 비동기 동작의 핵심 요소는 언어가 아닌 브라우저가 가지고 있다!

Web API

• Web API란 웹 페이지에 접근하고 조작하는 DOM(Document Object Model)과 BOM(Browser Object Model)을 포함하는 웹 브라우저가 제공하는 기능이다.
• Web API는 Dom 이벤트, Ajax, setTimeout 등 비동기 작업들을 수행할 수 있도록 API를 지원한다.

 

Event Loop

• 이벤트 발생 시 호출되는 콜백 함수들을 관리하여 Callback Queue에 전달하고, Callback Queue에 담겨있는 콜백 함수들을 Call Stack에 넘겨준다.
• 이벤트 루프가 Callback Queue에서 Call Stack으로 콜백함수를 넘겨주는 작업은 Call Stack에 쌓여있는 함수가 없을때만 수행된다. 반복적으로 Call Stack이 비어있는지 확인 하는 것을 tick이라고 한다.

 

Callback Queue

• Web API에서 비동기 작업들이 실행된 후 호출되는 콜백함수들이 기다리는 공간이다.
• Event Loop가 정해준 순서대로 줄을 서 있으며, FIFO 방식을 따른다.

 

🔎 SetTimeout 동작 순서

대표적인 WebAPI 호출 함수인 setTimeout 함수의 동작 순서이다. 

 

console.log('first');

setTimeout(function cb(){
	console.log('second');
}, 1000);

console.log('third');

 

1. console.log(’first’)가 Call Stack에 추가(push)된다.
2. console.log(’first’)가 실행되어 화면에 출력된 후, Call Stack에서 제거(pop) 된다.
3. setTimeout(function cb…)이 Call Stack에 추가된다.
4. setTimeout 함수가 실행되면서 브라우저가 제공하는 timer Web API를 호출한다. 그 후 Call Stack에서 제거된다.
5. console.log(’third’)가 Call Stack에 추가된다.
6. console.log(’third’)가 실행되어 화면에 출력되고 Call Stack에서 제거된다.
7. setTimeout 함수에 전달한 1000ms 시간이 지난 뒤 Callback으로 전달한 cb 함수가 Callback Queue에 추가된다.
8. Event Loop는 Call Stack이 비어있는 것을 확인하고 Callback Queue를 살펴 본다. cb를 발견한 Event Loop는 Call stack에cb 추가
9. cb 함수가 실행되고 내부의 console.log(’second’)가 Call Stack에 추가된다.
10. console.log(’second’)가 화면에 출력되고 Call Stack에서 제거된다.
11. cb가 Call Stack에서 제거된다.

위와 관련한 자세한 글은 아래 글을 참고하면 좋을 것 같다. 

https://medium.com/sjk5766/javascript-비동기-핵심-event-loop-정리-422eb29231a8

 

setTimeout vs setInterval
setTimeout: 지정된 시간이 경과한 후에 한 번만 특정 함수를 실행하는 기능 제공 setInterval: 일정한 시간 간격으로 지정된 함수를 반복적으로 실행하는 기능 제공 clearInterval: setInterval() 함수가 실행되고 있을 때, clearInterval() 함수를 사용하여 반복 중지(메모리 누수 방지)

 

참고자료

https://wikidocs.net/251942

https://velog.io/@qlgks1/javascript-node-동작-원리

https://velog.io/@somda/FE-JavaScript-동작-과정-Callback-Queue-Event-Loop

https://medium.com/sjk5766/javascript-비동기-핵심-event-loop-정리-422eb29231a8