Event Loop

@xufocoder

in the browser Javascript

and the Specification

PART 1

The Good, the Bad

JavaScript has a concurrency model based on an event loop*

* MDN. Concurrency model and Event Loop

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

Javascript

Implementation of ECMAScript*

ECMAScript specification is about:

* Syntactic and Lexical Grammars;

* Data Types and Values;

* Execution Contexts;

* Objects, Objects Behaviours;

* Functions and Classes;

* And etc.

* Standard ECMA-262, 6th Edition / June 2015

has not any mention about events, timers, callbacks and etc.

ECMAScript specification

Especially it's not about Event Loop

* HTML, Living Standard; W3C HTML5

Event Loop 

is formally specified in HTML specification*

 WHATWG. HTML Living standard

PART 2

Event Loop

It is infinitely looping and looking for new tasks to execute.

To coordinate activities: events, user interaction, scripts, rendering, networking, and so forth, user agents

what it looks like

Event Loop 

Event Loop. Task queues

An event loop has one or more task queues.

Task queue is an ordered list of tasks

Task queue

• Events
• Parsing
• Callbacks
• Using a resource
• Reacting to DOM manipulation

It is an ordered list of tasks, which are algorithms that are responsible for such work as:

• The DOM manipulation
• The user interaction
• The networking
• The history traversal

Generic task sources*

* HTML, Living Standard Generic task sources

Event Loop. Microtask queue

The event loop also has a single queue called the microtask queue.

The microtask queue is completely emptied in every tick after the current task finished executing.

There are two kinds of microtasks

• solitary callback microtasks

• compound microtasks

Microtasks

Each event loop also has a performing a microtask checkpoint flag

* HTML, Living Standard. Integration with the JavaScript job queue

JavaScript job is microtask? *

Event Loop. Render​

runTheResizeSteps()
runTheScrollSteps()

evaluateMediaQueriesAndReportChanges()

runCSSAnimationsAndSendEvents()
runTheFullscreenRenderingSteps()
runTheAnimationFrameCallbacks()
runTheUpdateIntersectionObservationsSteps()

intersectionObserverSteps()

paint()

* HTML, Living Standard; 8.1.4.2 Processing model, Update the rendering

Event Loop. Render​()*

Event Loop

2. Event Loop for Browsing Context

Each worker has one event loop. Workers have restrictions *

A browsing context event loop always has at least one browsing context

There are two kinds of event loops

1. Event Loop for Worker

* MDN. Functions and classes available to Web Workers

Browsing

Contexts

postMessage

postMessage

Web Worker

Task Queues

Task Queues

Web Worker

Task Queues

Event Loops

Event Loop. Practice

PART 3

Example of code *

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

What this code will output to the console?

* Tasks, microtasks, queues and schedules. Why this happens

Event Loop. Example of code

Loupe

Little visualisation to help you understand how JavaScript's call stack/event loop/callback queue interact with each other.

Built by Philip Roberts. Code is on github.

PART 4

Crowd of browsers

Let's make a test*

* Tasks, microtasks, queues and schedules. Level 1 bossfight

<div class="outer">
  <div class="inner" />
</div>

Test preparation. HTML part

Result in the browser 

We have the following HTML code

var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner');

new MutationObserver(function() {
  console.log('mutate');
}).observe(outer, {
  attributes: true
});

function onClick() {
  console.log('click');

  setTimeout(function() {
    console.log('timeout');
  }, 0);

  Promise.resolve().then(function() {
    console.log('promise');
  });

  outer.setAttribute('data-random', Math.random());
}

inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);

Test preparation. Javascript part

Click the inner square

PART 5

Long Running code

const times = 1000
const processor = new Processor();

for (let i = 1; i < times; i++) {
  // calculation time, for example 10ms
  processor.calculate(i); 
}

console.log(
  processor.result()
)

Long running code

There's an example of long running code*

* Example of blocking code on JSFiddle

There're solutions

Make loop via setTimeout *

Loop as little as possible

const calculate = (processor, times, callback) => {
  let i = 1;
  
  const tick = () => {
    if (i < times) {
    	processor.calculate(i);
      i++;
      setTimeout(tick);
    } else {
      callback();
    }
  }
  
  setTimeout(tick);
}

const processor = new Processor();

calculate(processor, 1000, () => {
  console.log(processor.result());
})

* Example of non-blocking solution on JSFiddle

Extract script. Use web worker API functions *

Use Web Workers

const worker = new Worker('/path/to/script.js');

worker.postMessage('start')
worker.onmessage = (e) => {
  console.log(e.data)
}

* Example of web worker solution on JSFiddle

// ..

self.addEventListener('message', (e) => { 
  if (e.data === 'start') {
    for (let i = 1; i < times; i++) {
      processor.calculate(i);
    }

    postMessage(
      processor.result()
    )
  }
}, false);

Create Worker instance. Post "start" message

Resources

• W3C vs. WHATWG HTML5 Specs – The Differences Documented

Used resources

For further reading

Any questions?

@xufocoder