└── readme.md /readme.md: -------------------------------------------------------------------------------- 1 | # 브라우저의 이벤트 루프 2 | 3 | 이벤트 루프관련 자료 모음입니다. 4 | 발표자료 : [youtube link](https://www.youtube.com/watch?v=YpQTeIqjC4o) 5 | 6 | ## 테스트 코드 7 | - [MacroTask로 일을 쪼개서 하기](https://jsfiddle.net/MR_RPF/wd2qtkx0/8/) 8 | - [MicroTask 사용 예제](https://jsfiddle.net/MR_RPF/etrLkxbp/5/) 9 | - [AnimationFrameQueue vs MacroTaskQueue](https://jsfiddle.net/MR_RPF/gtfLp08r/4/) 10 | - [MicroTaskQueue with click event handler](https://jsfiddle.net/MR_RPF/v5s4dofr/32/) 11 | - [setTimeout vs requestAnimationFrame (with CSS Transitions)](https://codepen.io/ahomu/pen/NRjxrG) 12 | 13 | ## 관련 자료 14 | - [Asynchronous JavaScript & EVENT LOOP from scratch 🔥 | Namaste JavaScript Ep.15](https://www.youtube.com/watch?v=8zKuNo4ay8E) 15 | - [Jake Archibald: In The Loop - JSConf.Asia](https://www.youtube.com/watch?v=cCOL7MC4Pl0) 16 | - [Jake Archibald: Tasks, microtasks, queues and schedules](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) 17 | - [Jake Archibald: Javascript microtask quiz](https://www.youtube.com/watch?v=Lum0R6Ng6R8) 18 | - [html.spec.whatwg - event loop processing model](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model) 19 | - [google - inside browser part series](https://developer.chrome.com/blog/inside-browser-part1/) 20 | - [Do events bubble in microtasks?](https://stackoverflow.com/questions/70734518/do-events-bubble-in-microtasks) 21 | - [Why is there a distinction between microtask and (macro)task in JavaScript?](https://stackoverflow.com/questions/68525922/why-is-there-a-distinction-between-microtask-and-macrotask-in-javascript/68598260#68598260) 22 | - [Using microtasks in JavaScript with queueMicrotask()](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) 23 | - [setTimeout vs requestAnimationFrame](https://stackoverflow.com/questions/71523029/settimeout-vs-requestanimationframe/71523642#71523642) 24 | - [DOMContentLoaded event and task queue](https://stackoverflow.com/questions/71318123/domcontentloaded-event-and-task-queue) 25 | - [Event dispatch and DOM event flow](https://w3c.github.io/uievents/#event-flow) 26 | - [In depth analysis of event loop and browser rendering, frame animation, idle callback](https://developpaper.com/in-depth-analysis-of-event-loop-and-browser-rendering-frame-animation-idle-callback-animation-demonstration/) 27 | - [Rendering Processing Model](https://docs.google.com/document/d/1Mw6qNw8UAEfW96CXaXRVYPPZjqQS3YdK7v57wFttAhs/edit#heading=h.p82ypq23qxwh) 28 | 29 | ## 질문 30 | ### Task란 무엇인가요? 31 | [공식 문서](https://html.spec.whatwg.org/multipage/webappapis.html#concept-task)에서 확인 가능합니다. 32 | 33 | ### 정말 queue는 3개 뿐인가요? 34 | [비슷한 이벤트 끼리 따로 따로 다른 queue에 넣습니다](https://html.spec.whatwg.org/multipage/webappapis.html#task-source). 여러개 있고 브라우저가 우선순위에 맞게 queue에서 task를 가져와 처리합니다. 35 | 36 | ### AnimationFrameQueue를 처리하다가 도중에 microTask가 MicroTaskQueue에 들어가면, 어떻게 그걸 먼저 실행하나요? 37 | [run the animation frame callbaks](https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#run-the-animation-frame-callbacks)단계에서 handler를 [invoke](https://webidl.spec.whatwg.org/#invoke-a-callback-function)하는데, 14번째 step에서 [clean up after running script](https://html.spec.whatwg.org/multipage/webappapis.html#clean-up-after-running-script)단계에 들어가는데, 이때 3번째 항목에 execution context stack이 비어있을때 [perform a microtask checkpoint](https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint)을 합니다. 다시말해서, AnimationFrameQueue에 들어있는 callback을 실행하고 execution context stack이 비게되면, micro task를 실행합니다. 38 | 39 | ### click event handler는 AnimationFrameQueue에 들어가나요? 40 | 공식 문서에 나와있지는 않지만, [마치 그런것처럼 작동한다는 의견](https://stackoverflow.com/questions/71568745/animation-frame-queue-vs-micro-task-queue#comment126513157_71568840)이 있습니다. 41 | 42 | ### addEventListener로 등록한 콜백 함수는 어디에 저장되나요? 43 | - [공식 문서](https://dom.spec.whatwg.org/#eventtarget-event-listener-list)를 보면 EventTarget에 event listener list가 있다고 나옵니다. 여기에 담깁니다. 44 | - [공식 문서](https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-attributes)를 보면, EventTarget에 event handler들이 들어있는 event handler map이 있다고 나옵니다. 45 | - 결론적으로 EventTarget에 담깁니다. 46 | 47 | ### 이벤트가 dispatch된후 처리되는 과정 48 | event target을 찾고, [propagation path](https://w3c.github.io/uievents/#propagation-path)가 결정된후, capture phase, target phase, bubble phase를 거치며 이벤트 객체와 함께 event listener가 호출됩니다. 49 | [참고문서](https://w3c.github.io/uievents/#event-flow) 50 | --------------------------------------------------------------------------------