Task queue에 대한 오해 정리

dev-mish-mash·2021년 3월 14일
1

많은 블로그에서 브라우저의 Task Queue에 대해 다루고 있는데 이에 대해 상반된 내용이 많아서, 저 나름대로 정리하기 위해 작성되었습니다. 잘못된 내용이 있을 수 있으니 피드백 부탁드립니다.

1. Task queue는 callback queue와 같은 개념이다?

  • Callback queue는 Task queue 의 한 종류일 수 있음.
  • Task queue는 html standard에서 사용되는 정식 명칭임.
  • Callback queue는, 아무리 찾아봐도 정식 명칭은 아님. html standard에도 그 개념을 찾을 수 없으며, callback queue에 대해 정리해놓은 블로그들을 찾아가 보면 결국, 이 영상과 이 이 그 출처였음.
  • 이 영상과 글은 javascript의 이벤트 루프에 대해 직관적으로 잘 설명되어 있어서 개념 잡기에 좋으나, 문제의 callback queue와 task queue를 혼용해서 사용하고 있으며, callback queue에 대한 어떤 reference도 제공해 주지 않음.
  • html standard을 기반으로 callback queue를 분석해 본다면, callback queue는 사용자 이벤트와 같은 비동기 작업들의 task source에 대응되는 task queue의 한 종류 일 수 있으며, 실제로 있는지는 확실하지 않음.
  • 확실하지 않은 이유는 html standard 자체가 task source를 느슨하게 정의해 놓았기 때문에, 실제 구현은 각자 브라우저에서 서로 다른 명칭으로 구현 되어 있을 수 있기 때문임.
  • 따라서, 결론적으로 callback queue는 브라우저가 가지는 여러 task queue 중 하나일 수 있으나, 확실히 있는 지 없는지는 V8 엔진이나 다른 엔진을 까보기 전에는 확신하지 못함. (구현체의 실제 내부 명칭이나 기능 또한 다를 수 있음)

2. Task queue에서 task는 javascript를 실행하여 처리한다?

  • 반은 맞고 반은 틀림
  • Task는 기본적으로 event loop의 task queue에서 처리되는 일의 단위이며, task source로부터 생성됨
  • Task의 종류에는
    • Script
    • Event
    • HTML parse
    • Callback
    • Resource (비동기로 요청되는 컨텐트들이 도착했을 때 처리할 일)
    • Reacting to DOM manipulation (javascript로 DOM을 조작할 경우, 실제 javascript 실행이 끝나고 DOM을 조작하는 task)
    등이 있음
  • 위에서 HTML parse, Resource, Reacting to DOM manipulation은 javascript로 동작하는 task들이 아님
  • Callback이나 Event, Script를 처리할 때만 V8과 같은 엔진을 통해 javascript를 실행하는 것임
  • 이렇기 때문에 task queue나 event loop는 V8 엔진 내부에 있는 것이 아닌, 외부에 존재하며 필요할 때만 V8 엔진을 통해 작업을 함

3. Rendering의 우선순위가 일반적인 task보다 높다?

  • 맞음.
  • 우선순위의 정도는 microtask = rendering > task 순서임 - 더 자세히는, 브라우저마다 다를 수 있음
  • 참고 : 이벤트 루프 동작 과정 - event loop proceeding model
    1. 먼저 task queue에서 runnable task를 하나만 꺼내 실행함
    2. 그 후 microtask queue가 전부 비워질 때까지 microtask를 모두 실행함
    3. 그 후 렌더링 할 게 있는지 확인하고(Rendering Opportunity) 있으면 렌더링을 함
    4. 다시 첫번째로 돌아가서 무한히 반복하며(loop), 일할 게 없으면 휴면 상태에 들어감

4. Task queue는 실제 자료구조는 queue이다?

  • 아님.
  • 실제로는 Set으로 구현되어 있으며, 대기하고 있는 task 중 runnable task를 뽑아내기 위해 이러한 구조를 가짐

추가적인 reference

Which types of queues are in event loop?
이벤트 루프, 매크로태스크, 마이크로태스크, 렌더링

profile
Front-End developer

0개의 댓글