JavaScript Event Loop와 Task Queue 이해하기

JavaScript는 event-driven 방식으로 프로그램을 수행하며, 개발자에게는 단일 thread(main thread)를 제공하여 task를 하나씩 순차적으로 실행합니다. Main thread의 부담을 줄이기 위해 network 요청과 같은 I/O 작업은 별도의 thread pool을 통해 처리됩니다. 또한, JavaScript는 main thread와 독립적으로 오래 걸리는 작업을 처리하기 위해 web worker를 활용할 수 있도록 지원합니다. 이를 통해 개발자는 multi-thread 프로그래밍을 직접적으로 고려하지 않고도 병렬 처리를 활용할 수 있습니다.

JavaScript 엔진에서 실행되는 thread(main thread 및 각 web worker)는 자신만의 event loop와 task queue를 갖습니다. Web worker의 경우 task queue 대신 message queue라는 용어를 사용하기도 하지만, 근본적으로 동일한 개념입니다. (엄밀히 말하면, web worker는 별도의 message queue를 가지며, main thread는 task queue를 통해 worker와의 메시지를 처리합니다. 둘 다 event loop에 의해 관리됩니다.)

Event loop는 while loop 형태로 task queue를 지속적으로 감시하며, queue에 task가 남아있으면 해당 task를 가져와(dequeue) 실행합니다. 예를 들어, click event에 대한 task라면, event loop는 해당 task 실행 시점에 MouseEvent 객체를 생성하고, 이 event에 연결된 event handler를 실행합니다. 만약 handler가 없다면 아무 작업도 수행하지 않습니다. MouseEvent 객체가 생성될 때의 시간이 event.timeStamp에 저장됩니다. (PerformanceEntry.startTime 역시 이 시점을 기록하며, event.timeStamp와 거의 동일한 값을 가집니다. 다만, PerformanceEntry는 더 다양한 성능 측정에 사용됩니다.)

웹 브라우저의 main thread는 HTML 파싱, CSS 처리, JavaScript 실행, 사용자 이벤트 처리 등 매우 많은 작업을 수행합니다. 따라서 각 event handler는 가능한 짧고 효율적으로 작성되어야 합니다. Event handler가 지나치게 많은 작업을 수행하면 웹 페이지의 응답성이 떨어져 사용자 경험을 저해할 수 있습니다. 사용자는 200ms 이내의 응답 시간을 기대하며, 이보다 긴 시간이 소요될 경우 응답성이 낮다고 느낄 수 있습니다. 특히 사용자 입력에 대한 즉각적인 반응이 중요한 웹 애플리케이션의 경우, event handler의 최적화는 매우 중요합니다.

참고: Tasks, microtasks, queues and schedules - JakeArchibald.com