Skip to content

Instantly share code, notes, and snippets.

@jkasaudhan
Created April 16, 2018 20:21
Show Gist options
  • Save jkasaudhan/7b5098e720f849248b806ae1724dd636 to your computer and use it in GitHub Desktop.
Save jkasaudhan/7b5098e720f849248b806ae1724dd636 to your computer and use it in GitHub Desktop.
eventLoop = {
taskQueues: {
events: [], // UI events from native GUI framework
parser: [], // HTML parser
callbacks: [], // setTimeout, requestIdleTask
resources: [], // image loading
domManipulation[]
},
microtaskQueue: [
],
nextTask: function() {
// Spec says:
// "Select the oldest task on one of the event loop's task queues"
// Which gives browser implementers lots of freedom
// Queues can have different priorities, etc.
for (let q of taskQueues)
if (q.length > 0)
return q.shift();
return null;
},
executeMicrotasks: function() {
if (scriptExecuting)
return;
let microtasks = this.microtaskQueue;
this.microtaskQueue = [];
for (let t of microtasks)
t.execute();
},
needsRendering: function() {
return vSyncTime() && (needsDomRerender() || hasEventLoopEventsToDispatch());
},
render: function() {
dispatchPendingUIEvents();
resizeSteps();
scrollSteps();
mediaQuerySteps();
cssAnimationSteps();
fullscreenRenderingSteps();
animationFrameCallbackSteps();
while (resizeObserverSteps()) {
updateStyle();
updateLayout();
}
intersectionObserverObserves();
paint();
}
}
while(true) {
task = eventLoop.nextTask();
if (task) {
task.execute();
}
eventLoop.executeMicrotasks();
if (eventLoop.needsRendering())
eventLoop.render();
}
@slmyers
Copy link

slmyers commented Jun 28, 2019

I like this. Thanks for sharing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment