JS 동작 원리

JavaScript에 대한 동작 원리를 잘 모르는 상태로 계속 써왔었기에, 이번 기회에 정리를 해보고자 한다.
ppt로 그림 그렸는데...역시 난 미적 감각이 없나보다..😂

자바스크립트 동작 원리

• 자바스크립트는 싱글스레드(single thread) 기반이며 논 블로킹 방식의 비동기적인 동시성 언어이다.
• 콜 스택, 이벤트 루프, 테스크 큐, Web API 그리고 다른 API를 가지고 있다.

콜 스택 (Call Stack)

: 함수가 호출한 순서대로 쌓이는 스택. 프로그램에서 우리가 어디에 있는지를 기록하는 데이터 구조.
js는 단일 스레드를 가지고 있기에 하나의 콜 스택만 존재한다.

블로킹 (Blocking)

: “느리게 동작하는 코드”로 정의할 수 있다. 콜 스택에 현재 네트워크 요청과 같은 느리게 동작하는 작업이 남아있는 것을 말한다.

예시로 동기적으로 네트워크 요청을 하였을때, 네트워크 요청은 느린 작업이기에 다음 작업이 바로 실행되지 않고 현재 작업이 끝날 때까지 기다린다. 이러한 blocking은 사용자 경험을 막게 되기에 이를 “비동기 콜백”으로 해결해야 한다.

비동기 콜백 (Asynchronous Callback)

: 특정 연산이 끝날 때까지 기다리지 않고 다음 코드를 실행한다. 그 후 나중에 실행될 콜백 함수가 제공된다.

console.log("First Stack");
setTimeOut(function callback(){
	console.log("Asynchronous Callback");
}, 3000);
console.log("Second Stack");

JS는 싱글스레드 기반임에도 불구하고 웹 브라우저가 제공하는 API를 통해 동시에 작업을 할 수 있다. 이를 “동시성”이라고 한다.

처음엔 호출 순서대로 콜 스택에 쌓이다가 setTimeout 함수를 웹 브라우저에게 넘겨주고, 두번째 log를 쌓는다. 따라서 아래가 먼저 출력된다.

- 결과 -
First Stack
Second Stack

콜 스택에서 main()을 제외한 모든 함수가 return되고, Web API의 setTimeout 타이머가 종료되면 해당 콜백이 테스크 큐(Task queue)로 전달된다. 여기서 이벤트 루프(Event loop)는 콜 스택이 비어 있다면, 테스크 큐에서 콜백을 꺼내어 콜 스택에 넣어준다.

- 결과 -
First Stack
Second Stack 
Asynchronous Callback

테스크 큐 (Task Queue)

: Web API가 수행한 비동기 함수를 넘겨받아 Event Loop가 해당 함수를 Call Stack에 넘겨줄 때까지 비동기 함수들을 쌓아두는 곳. Macrotask Queue라고도 부른다.

• setTimeout(), setInterval(), setImmediate()와 같은 task를 넘겨 받는다.
• 방문할 때, 한 번에 하나의 작업만 call stack에 전달한다.

이벤트 루프

: 콜백 큐(callback queue)와 콜 스택(call stack) 두 부분을 지켜보다가 스택이 비는 시점에 콜백을 실행시켜 준다. 즉 콜백 큐에서 콜백을 꺼내 콜 스택에 넣어주는 역할을 한다.

Microtask Queue

: 일반적으로 테스크 큐 비슷하다.

• 일반 task queue보다 우선순위가 높다
• Promise, async/await, process.nextTick, Object.observe와 같은 비동기 호출을 넘겨받는다.
• 방문할 때, 큐 안에 있는 모든 작업들을 수행한다.

// 1. 실행
console.log("script start");

// 2. task queue로 전달
setTimeout(function(){
	// 8. task 실행
	console.log("setTimeout");
}, 0);

// 3. microtask queue로 전달
Promise.resolve()
	.then(function() {
		// 5. microtask 실행
		console.log("promise1");
	})
	// 6. microtask queue로 전달
	.then(function() {
		// 7. microtask 실행
		console.log("promise2");
	});

// 4. 실행
console.log("script end");

- 결과 - 
script start
script end
promise1
promise2
setTimeout

Animation Frames

: requestAnimationFrame과 같이 브라우저 렌더링과 관련된 task를 넘겨받는 Queue이다.

• 우선순위는 (macro)Task < Animation Frames < microtask 이다.
• 방문할 때, 큐 안에 있는 모든 작업들을 수행한다.

// 1. 실행
console.log("script start");

// 2. task queue로 전달
setTimeout(function () {
  // 10. task 실행
  console.log("setTimeout");
}, 0);

//3. microtask queue로 전달
Promise.resolve()
  .then(function () {
    // 6. microtask 실행
    console.log("promise1");
  }) // 7. microtask queue로 전달
  .then(function () {
    // 8. microtask 실행
    console.log("promise2");
  });

//4. AnimationFrame으로 전달
requestAnimationFrame(function () {
  //9. animation frame 실행
  console.log("animation");
});

//5. 실행
console.log("script end");

- 결과 -
script start
script end
promise1
promise2
animation
setTimeout

이벤트 루프의 비동기 작업을 처리하는 우선순위

Microtask Queue → Animation Frames → Task Queue

참고자료 :

1. https://new93helloworld.tistory.com/358
2. https://baeharam.netlify.app/posts/javascript/event-loop
3. https://velog.io/@titu/JavaScript-Task-Queue말고-다른-큐가-더-있다고-MicroTask-Queue-Animation-Frames-Render-Queue