Eventhandling und Microtasks

[Matthias Fulde]

Hallo Michael,

worauf ich hinaus wollte, ist, dass man Task und Callback eben nicht pauschal gleichsetzen kann. Task ist in diesem Fall die Ereignisverarbeitung für ein bestimmtes Ereignis, nicht der Aufruf eines einzelnen Handlers für das Ereignis. Die Beschreibung "Zyklus: Task → Microtasks → Rendering" ist hier zu einfach. In der Praxis können innerhalb eines Eventloops an mehreren Stellen Microtasks ausgeführt werden, und auch der Rendering-Schritt wird nicht zwangsläufig in jeder Iteration tatsächlich ausgeführt.

Wie in meinem Posting beschrieben, sieht die Spec vor, dass nach jedem Aufruf von Usercode, wenn der Callstack leer, ist Microtasks ausgeführt werden. Das impliziert aber nicht, dass eine Task nicht mehrere Funktionen ausführen kann. Die Task implementiert hier Dispatching Events und ruft im Zuge dessen die registrierten Eventhandler auf. Da der Callstack nach jedem Aufruf leer ist (wenn wir das Ereignis nicht programmatisch erzeugt haben), werden die hinterlegten Microtasks unmittelbar danach ausgeführt, vor dem Aufruf des nächsten Handlers. Das alles ist aber Teil der Verarbeitung ein und derselben Task.

In Event Loop Processing Model sind die Schritte beschrieben, die in jedem Zyklus des Eventloops ausgeführt werden sollen. Der Rendering-Schritt ist dabei in update the rendering beschrieben. Neben all dem anderen Kram werden hier auch Callbacks die mit requestAnimationFrame hinterlegt wurden ausgeführt. Nehmen wir jetzt einmal an, wir registrieren in jedem von Rolfs Handlern nicht nur eine Microtask, sondern auch eine Animation Frame Callback. Wäre es nun so, dass jeder Handler selbst eine Task ist, dann müsste die Ausführungsreihenfolge so aussehen:

captureBodyHandler
captureBodyMicrotask
captureBodyAnimationFrame

captureDivHandler
captureDivMicrotask
captureDivAnimationFrame

targetButtonHandler
targetButtonMicrotask
targetButtonAnimationFrame

bubbleDivHandler
bubbleDivMicrotask
bubbleDivAnimationFrame

bubbleBodyHandler
bubbleBodyMicrotask
bubbleBodyAnimationFrame

Tut sie aber nicht. Die Ausführungsreihenfolge ist:

captureBodyHandler
captureBodyMicrotask
captureDivHandler
captureDivMicrotask
targetButtonHandler
targetButtonMicrotask
bubbleDivHandler
bubbleDivMicrotask
bubbleBodyHandler
bubbleBodyMicrotask

captureBodyAnimationFrame
captureDivAnimationFrame
targetButtonAnimationFrame
bubbleDivAnimationFrame
bubbleBodyAnimationFrame

Viele Grüße,

Matthias