자바스크립트 태스크 큐, 이벤트 루프,

태스크 큐

 

- 콜백 함수들이 대기하는 큐 형태의 배열을 의미한다.

 

 

 

이벤트 루프

1.현재 실행중인 태스크가 없는지와 태스크 큐에 태스크가 있는지를 반복적으로 확인
2.호출 스택이 비워질 때마다 큐에서 콜백 함수를 꺼내와서 실행하는 역할을 해 준다.

 

태스크 큐 개념 + 이벤트 루프 개념 예제
function delay() {
    for (var i = 0; i < 100000; i++);
}
function foo() {
    delay();
    bar();
    console.log('foo!');
}
function bar() {
    delay();
    console.log('bar!');
}
function baz() {
    console.log('baz!');
}

setTimeout(baz, 10);  (A)
foo(); (B)

 

=> 0.01초만에 baz가 실행될꺼 같지만 자바스크립트 엔진이 테스크 큐에 baz를 추가만 한 후
foo가 실행하게된다. 그리고 foo가 호출 스텍에서 제거되면 이벤트 루프에 의해 테스크 큐에 추가 시켜놓았던 baz가 실행되게 된다.

 

★ 렌더링 엔진이 렌더링 요청을 보내면 테스크 큐에 쌓이게 된다.