Javascript Event Loop

A visual introduction of the Javascript event loop that can slove the doubt from many Javascipt beginning.

Javascript Event Loop


Jake Archibald: In The Loop - JSConf.Asia

The loop contains of task execution, the execution of microtasks and the execution of animation callbacks


Tasks Queue

Stack style: a task at the bottom of the stack is to be exacute in a loop while new task is added to the top of the stack
An invoked Javascript function is a task

Animation Callbacks Queue

All out with exception: all animation callbacks are to be executed except the ones queued while executing the queue

Microtasks Queue

All out: all animation callbacks are to be execute including the ones queued while the executing the queue and it will block rending


Style Calculation: css

Layout: Render tree

Painting: Create the actual pixel data