Front-end/Javascript

자바스크립트의 호출스택,큐 그리고 이벤트루프

madison 2021. 3. 28. 21:57

"one thread == one call stack ==> one thing at a time. "


자바스크립트는 싱글 스레드 기반 언어이며, 힙,큐와 함께 구성하는 단일 콜스택을 가지며 자바스크립트 V8 내부에 구현되어있다. 

(스레드 : 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스. 각 작업은 순차적으로 실행된다.) 

Web API 는  브라우저에서 제공한다.. 

호출 스택 : 여러 함수들을 실행하는 스크립트에서 해당 위치를 추적하는 인터프리터를 위한 메커니즘. 

함수  실행시, stack에 push를 하고, 실행이 종료됐을떄 (return받을때 ) popped out 을 거친다.

 

: 선언된 변수들은 힙 내부에 할당된다. 

: 코드가 push되고 실행될때까지 기다리는 리스트. 

이벤트루프 (메세지 큐와 콜스택을 관리한다) : 호출스택이 비어있으면 큐에서 첫번재 이벤트를 가져와 호출스택에 push되어 함수가 실행된다. 이러한 반복을 tick 이라고 부른다. 

브라우저는 호출스택에 실행할 함수가 있다면 블로킹 상태이다. 스택안에 있는 함수들을 실행할때, 코드가 느리게 실행된다면 싱글 스레드로 해결할수있을까?

=> 비동기적 프로그래밍을 이용하면 된다. (Ajax, setTimeout, 콜백함수, 프로미스, ... .) 

setTimeout은 타이머를 설정하고 타이머가 만료되면 콜백을 이벤트 루프에 넣어놓고 틱이 수행할수있도록 한다. 

 

 

참고하면 좋은 글과 영상

jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/ 

www.youtube.com/watch?v=8aGhZQkoFbQ&ab_channel=JSConf   

www.javascripttutorial.net/javascript-bom/javascript-settimeout/