Javascript 동작 방식

Javascript 는 Event Loop을 기반으로 한 Runtime Model을 가지고 있다.

현재 브라우저들은 해당 개념을 기반으로 최적화를 하여 보다 정교하게 구현하였지만,

그 기반의 원리에 대해서는 알아두고 있으면 동작방식을 이해하는데 유용할 것이다. 

Runtime 구현 원리에 대해서 알아보자.

 

데이터 처리 영역

Javascript Run Time에서는 다음과 같은 3가지 영역을 통해 데이터를 처리한다.

1. Heap

Object 들이 위치하는 메모리 영역

2. Stack

function이 Call 될 때 마다 Frame이 Stack에 쌓이게 된다.

Stack은 Function Call의 집합, 즉 Frame의 집합이다.

Frame 실행 도중에 Frame이 쌓일 수 있으며 종료 후에 다시 Frame이 실행되는

일반적인 함수 Call Stack 구조이다.

아래 예시로 명확하게 이해해보도록 하자.

예시

function foo() {...}

function bar(x) {
	...
	foo()
	...
}

const baz = bar(7); // assigns 42 to baz

위 처럼 bar가 실행되면 아래와 같이 Stack에 frame들이 쌓이게 된다.

bar가 실행되는 도중 foo frame이 쌓이게 되고, foo frame이 실행 완료 된 후 다시 bar frame으로 돌아와 실행이 완료되게 된다.

3. Queue

Javascript에서는 Message Queue로 불리며, Message의 집합이다.

생성 시점

Message는 Event가 발생할 때 생성되며, 해당 Message는 해당 Event Listener에 등록된

Handler를 가진다. 만약 해당 Event Listener에 Handler가 등록되어 있지 않다면 Message를

생성하지 않을 것이다.

Message 처리 시점

Messagge Queue에 Message가 처리되는 시점은 Stack이 비워진 후 이다.

Message 를 처리 한다는 것은 해당 Message의 Callback 함수(Handler)를 실행하는 것이므로

그로 인해 생성된 Frame들이 모두 처리되면(Stack이 비워지면) 그 다음 Message가 처리되게 된다.

TMA

javascript 는 Single-Thread라고 하였지만 내부적으로는 Event Loop를 구현하기 위한 Thread가 동작중이다.

 

4. Background

javascript의 Event로 분류된 것들은 background 영역에서 처리가 된다.

Event는 마우스, 키보드, 파일 입출력, setTimeout, Promise, 기타 네트워크 통신 처리 등이 있으며 이러한 명령어들은 background에서 실행되어 완료가 되면 Message가 Queue에 삽입된다.

Bacgkround 영역은 javascript runtime과 별개로 동작하며 완료되는 순서는 보장되지 않는다.

즉 Event가 발생한 순서대로 Queue에 Message가 쌓이는 게 아니라는 점이다.

Queue에 Message가 삽입되는 시점은 Background에서 해당 Event 처리를 완료한 시점이기 때문!

 

 

예시

setTimeout 함수를 예시에 사용한다. setTimeout도 일정 시간이 지난 후에 Callback 함수를 실행하는 함수이기 때문이다.

function fn1(){
	console.log("excute fn1")
}
function fn2(){
	console.log("excute fn2")

	setTimeout(() => {
		console.log("excute setTimeout Callback1")
	}, 0)
	setTimeout(() => {
		console.log("excute setTimeout Callback2")
	}, 0)

	fn1()
}

fn2()

// output
// execute fn1
// execute fn2
// execute setTimeout Callback1
// execute setTimeout Callback2

위 예시를 Stack, Queue를 이용해 3단계로 나눠서 보여주겠다.

(background 영역은 별도로 표시하지 않았다)

1. fn1 실행 시점

// output
// execute fn2

fn1 실행 시점에는 위 그림과 같이 Stack, Queue가 형성될 것이다.

여기서 Queue에 Message가 바로 생성된 것처럼 기술하였지만, Background에서 Timer가 실행되고 바로 시간이 다 되어 Event 발생과 동시에 Message가 삽입된 것으로 이해해주길 바란다.

이 시점 다음부터 Stack에 있는 모든 Frame이 실행될 것이다

2. Stack Empty 시점

// output
// execute fn2
// execute fn1

Stack이 비워진 후에 Queue내에 Message가 순차적으로 처리될 것이다.

3. Queue Empty 시점

// output
// execute fn2
// execute fn1
// execute setTimeout Callback1
// execute setTimeout Callback2

이렇게 Heap, Stack, Queue 영역으로 나뉘어지고 각각의 영역에서 코드들이 처리가 된다.

이제 특징에 대해서 알아보자.

---

특징

비선점 (Non-preemptive)

Queue에서 Message가 실행이 되면 완료되기 전 까지 다른 Message가 선점하지 못한다.

한번 실행이 되면 완료를 한다는 의미에서 Run-to-completion 이라고도 한다.

논블로킹 (Non-Blocking)

javascript thread는 어떤 작업에도 Blocking되지 않는다. Javascript는 I/O 처리를 모두

Event & Callback 방식으로 처리하기 때문이다.

위에서 언급 했듯이, 모든 Event Callback은 Message형태로 Queue에서 실행이 대기 된다.

비동기 통신도 Event로 처리되며, 통신 응답 시에 Queue에 Message가 쌓여 순차적으로 실행 된다.

물론 동기 처리 기능이 없는 것은 아니다.

과거에는 Alert 또는 Syncrounous XHR 등 Blocking 기능을 종종 사용되었지만,

현재는 사용이 권장되고 있지 않다.

✅ XHR : XMLHttpRequest

 

이상으로 잘못된 부분은 댓글로 지적해주시면 감사하겠습니다.

 

참고자료

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#event_loop