Event Loop
먼저, 자바스크립트 엔진에 대해 알아야 합니다.
자바스크립트 엔진
- 자바스크립트 엔진 안에는
Memory Heap과Call Stack로 나뉘어 있습니다.
-
Memory Heap
- 데이터를 만들 때, 즉 변수를 선언해서 오브젝트를 할당하거나 문자 또는 숫자를 할당하게 되면 전부 메모리 힙에 저장 됩니다.
- 메모리 할당이 일어나는 곳
-
Call Stack
- 함수를 실행하는 순서에 따라서 차곡차곡 쌓아놓는 것
- 코드 실행에 따라 호출 스택이 쌓이는 곳
- LIFO(Last In First Out) : 제일 나중에 들어온 것이 제일 처음으로 나갑니다.
런타임 환경
- 자바스크립트 언어 자체에는 멀티 스레딩이 없습니다.
Process
-
운영체제 위에서 연속적으로 실행되고 있는 프로그램
-
독립적으로 메모리에서 실행 합니다.
-
각각의 프로세스는 자원(리소스)들이 정해져 있습니다.
-
프로세스 안에는
code: 프로그램을 실행하기 위한 코드stack: 프로세스 안에서 함수들이 어떤 순서로 실행되어야 하는지, 함수가 끝나면 어디로 다시 돌아가는지에 대한 정보Heap: 오브젝트를 생성하거나 데이터를 만들 때, 데이터들이 저장되는 공간 [ 동적으로 할당된 변수가 저장 ]Data: 전역 변수나 스태틱 변수들이 할당
Thread
-
한 프로세스 안에서 여러 개 동작할 수 있는데 각각 저마다 해야 되는 임무를 받습니다.
-
즉, 한 프로세스 안에서 동시에 기능을 수행하는 여러 개의 Thread가 생성
-
예시 ) 프로그램에서 음악을 들으면서 사진을 편집할 수 있는 어플리케이션이 있다면,
각각 스레드는 음악을 재생하는 스레드와 사진을 편집하는 스레드가 있습니다.
JavaScript 는
-
기본적으로 싱글 스레드 기반 언어 입니다.
-
즉, 호출 스택이 하나. 따라서 한 번에 하나의 작업만 처리가 가능 합니다.
-
하지만, 자바스크립트가 동작하고 있는 브라우저 위에는 즉, 브라우저라는 프로그램 안에서는 여러 가지의 스레드가 들어있습니다.
-
web API's 와 Event Loop 등을 사용하여 멀티 스레딩이 가능하다.
Event Loop
-
Call Stack 과 Task Queue의 상태를 체크 보면서 Call Stack이 실행 중이면 기다렸다가
-
Call Stack의 함수가 모두 실행되고 완전히 비워지면
-
Task Queue의 첫 번째 callback 함수를 Call Stack에 하나씩 추가하여
-
자바스크립트 엔진이 차례대로 수행할 수 있도록 해줍니다.
Task Queue
-
자바스크립트 런타임 환경에서 비동기적으로 실행되는 callback 함수를 보관하는 공간
-
Call Stack 이 빈 상태가 되면,
Event Loop에 의해 Task Queue에 저장된 순서대로 하나씩 Call Stack으로 이동 합니다.
예시
function first(){
console.log('first')
}
function second(){
console.log('second')
}
function thrid(){
console.log('thrid')
}
first()
setTimeout(()=> second(),2000)
thrid()- first() 가 호출되면서 call stack 에 추가되고, fisrt() 실행
- console에 first가 출력되고, first() 실행이 끝나면 call stack 에 first() 가 삭제되고 비워집니다.
- setTimeout(()=> second(),2000) 호출되고, call stack에 추가
- setTimeout()이 실행되면서 브라우저가 제공하는 web API를 호출하고 call stack에서 제거. web API 에서는 Timer가 실행
- web API 에서는 timer 가 실행되는 동안 thrid() 가 호출되고, third()가 call stack에 추가
- console에 third가 출력되고, thrid() 실행이 끝나면 call stack 에 thrid() 가 삭제되고 비워집니다.
- 2000ms 가 지나 timer가 종료되면 callback 함수 second()를 Task Queue에 저장
- Event Loop는 call stack이 비어있는 것을 확인하고 Task Queue에 있는 함수를 call stack에 추가
- second()가 실행되어 console에 second가 출력되고, second() 실행이 끝나면 call stack 에 second()가 삭제되고 비워집니다.
참고
