JavaScript Event Loop와 Task Queue 이해하기

Web|2025. 2. 9. 06:27

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

댓글()

자바스크립트 for 2.0 & Learning JavaScript

책읽기|2007. 6. 14. 08:21
b_pic/200705090001.gif

(사진: http://www.kangcom.com)

서점에 가보니 "자바스크립트 for 웹2.0"이라는 그럴듯한 제목을 가진 책이 새로 나와 있었습니다. 부제로는 "JavaScript Web Programming"을 달고 있습니다. 오렐리(O'Reilly) 책을 한빛미디어에서 번역하여 출판하였는데, 웹2.0이라는 다소 자극적인(?) 문구를 제목에 담고 있습니다. 개발 서적까지 웹2.0이라는 문구를 넣는 것이 신선해 보였지만, 제대로 쓰여진 책을까 하는 의심이 들기도 했습니다.

사실 자바스크립트를 체계적으로 공부해 본 사람은 많지 않을것 같습니다. 주로 Copy & Paste로 써왔고 HTML과 덕지 덕지 섞어 쓰느라 그렇게 매력적인 언어로는 보지 않았을테지요. 그러던 것이 Ajax기술이 뜨면서 다시 관심을 받게 되었고, 다양한 JavaScript기반 Toolkit이 나오면서 리치웹을 구현하는데 있어서 DOM 스크립팅의 중요성을 다시 인식하게 되었습니다. 하여간 이 책은 최근 웹 기술 트랜드를 반영한 자바스크립트 입문서이므로 새롭게 자바스크립트를 배우려는 개발자 또는 웹디자이너 뿐만 아니라 기존 웹개발자에게도 유익한 책이라고 할 수 있습니다.

catalog/covers/0596527462_cat.gif

(사진: http://www.oreilly.com/catalog/learningjvscpt/)

그런데, 이 책의 원서를 살펴보니 코뿔소 그림만 같지 완전히 다른 책 처럼 보였습니다. (사실 꼬뿔소 그림도 약간 다른데, 머리가 향하는 방향이 다릅니다. 왜 일까요?) 우선 제목이 다릅니다. 원서는 "Learning JavaScript"라는 제목을 갖고 있는데, 다소 일반적인 제목이라 웬지 별 특징이 없는 책 처럼 보입니다. 다행히 책 위쪽 모서리에 "Covers Ajax & DOM"라는 부제목을 붙여서 이 책이 최신 웹기술을 다루고 있음 보여주고 있습니다. 하지만 번역판에 비해 웬지 약해 보이는 것은 사실이다. 오렐리 책을 번역하면서 이 처럼 제목을 완전히 변경한 사례는 처음인 것 같습니다.

책 제목만 봤을 때, 마켓팅 차원에서 보면 한빛미디어가 오렐리 보다는 한수 위라는 느낌이 들었습니다. 우선 책 제목을 그럴듯하게 잘 붙였고, 표지도 기존 오렐리 디자인에서 벗어나 약간의 변화를 주어(물론 특유의 단순함은 유지) 이 책이 뭔가 새로운 것을 담고 있다는 느낌을 주고 있습니다. 아마 서점에서 이 책을 보면 한번 쯤은 내용을 보고 싶은 생각이 들 정도로 신선해 보였습니다. 물론 기존 자바스크립트 개발자에게는 약간의 낚시성 제목일 수도 있습니다.

아직 번역서의 내용은 보지 못해 이 책이 잘 번역되었는지 판단하기 힘들지만 여하튼 원서보다는 여러모로 신경을 많이 쓴 듯 보입니다. 사실 국내에서 내용 뿐만 아니라 편집이나 표지까지 만족시키는 번역서가 많지 않은데, 최근 들어 원서 만큼의 품질을 제공하는 번역서를 심심치 않게 찾을수 있습니다.

files/book/0903114093.gif

(사진: http://www.acornpub.co.kr)

"조엘 온 소프트웨어"도 그러한 예중에 하나인데, 오히려 원서보다도 더 잘 만들어져 있다고 생각합니다. 특히 번역한 분의 생각과 번역하면서 참고한 정보들도 함께 담겨져 있어 원서 보다 볼 거리가 더 많습니다.

누가 말했듯이 번역은 새로운 창조인 듯 보입니다. 단순 번역이 아닌 재 창조한다는 생각으로 책을 출판한다면, 번역서가 더 이상 외면 받지는 않겠지요..

이 글은 스프링노트에서 작성되었습니다.

'책읽기' 카테고리의 다른 글

웹이후의 세계를 읽고...  (2) 2009.10.11
"대화" 리영희  (2) 2009.01.27
해커와 화가  (3) 2006.07.17
백범일지  (0) 2004.12.06
안데르센 동화를 읽으면서...  (2) 2004.07.04

댓글()