WebAssembly

Lin Clark Mozilla

Most images taken from Lin Clark's articles:
https://hacks.mozilla.org/author/lclarkmozilla-com/

What are we going to talk about?

What is WebAssembly?
- JIT Compilers
- Assembly
Working with WebAssembly
What makes WebAssembly fast?
State of WebAssembly

What is WebAssembly?

WebAssembly is a way of taking code written in a language other than JavaScript and running that code in the browser
Saved as .wasm files

Performance History

JS after JIT

Performance History

After WASM?

JIT Compilers

JIT Compiler

Interpreted Code

Compiled Code

JIT Compiler

Interpreted Code

JIT Compiler

Compiled Code

JIT Compiler

Interpreter

JIT Compiler

Baseline Compiler

JIT Compiler

Optimizing Compiler

JIT Compiler

JIT Compiler Example

function arraySum(arr) {
  var sum = 0;
  for (var i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
}

JIT Compiler Example

function arraySum(arr) {
  var sum = 0;
  for (var i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
}

JIT Compiler Example

Assembly Crash Course

Working with WebAssembly

function fetchAndInstantiate(url, importObject) {
  return fetch(url).then(response =>
    response.arrayBuffer()
  ).then(bytes =>
    WebAssembly.instantiate(bytes, importObject)
  ).then(results =>
    results.instance
  );
}

Working with WebAssembly