7월18일 - JavaScript의 비동기 작업와 블로킹

개요

이런 질문을 받은 적이 있다. 

 

cpu에서 연산에 시간이 걸리는(약 10초 이상) 함수 A와 

setTimeout에 의해 3초 뒤 실행되는 함수 B, 6초 뒤 실행되는 함수 C

이렇게 세 함수가 실행될 때 3초 뒤, 6초 뒤 실행되는 함수 B, C는

실질적으로 처음 기준 몇 초 뒤에 실행될까요?

 

당시에는 이벤트 루프의 동작 방식에 대해 어느정도 알고 있다 생각했기에

 

A 함수가 CPU 연산이 될 동안 (10초)

Web API에 의해 B, C의 타이머가 따로 진행되서 이미 3초, 6초가 지나버려

callback queue에 B, C의 콜백 함수가 들어오고

call stack에서 A 함수가 pop되는 순간 바로 B, C의 콜백 함수가 실행되어 

결과적으로 함수 실행 후 10초 뒤 A, B, C 출력이 연속으로 찍힐 것이다. 

 

라고 답변했었다.

당시에도 긴가민가 했는데 오늘 테스트를 통해 해당 질문의 답을 얻음과 동시에

JavaScript 동작 원리를 좀 더 이해할 수 있었다.

 

코드

function A() {
	for (let i = 0; i < 100000000000; i++) {}
	console.log('A: ', new Date());
}

function B() {
	setTimeout(() => {
		console.log('B: ', new Date());
	}, 3000);
}

function C() {
	setTimeout(() => {
		console.log('C: ', new Date());
	}, 6000);
}

const t = new Date();
console.log(t);
A();
B();
C();

 

정리

결론부터 말하자면 A 함수의 결과가 나온 후부터 3초 뒤, 6초 뒤에 각각 B, C가 출력된다. 가 정답이었다.

A 함수의 연산이 약 12초 정도 걸렸는데

그 이후 3초, 6초 뒤에 console.log가 찍힌걸 볼 수 있다.

 

JavaScript는 싱글 스레드이기 때문에 CPU 연산 작업을 할 때 다른 작업에 대해선 블로킹이 되는데

A 함수가 동작할 때 마찬가지로 B, C 함수가 블로킹 되기 때문에 A 함수의 작업이 끝난 뒤부터 시간이 흐른 것이다.