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

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

JIT Compiler Example

Assembly Crash Course
Assembly Crash Course

Assembly Crash Course

Assembly Crash Course

Assembly Crash Course

Assembly Crash Course

Assembly Crash Course

Working with WebAssembly
Working with WebAssembly

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

Working with WebAssembly

Working with WebAssembly

Working with WebAssembly
Working with WebAssembly

What makes WebAssembly fast?
What makes WebAssembly fast?

JS Early Days
What makes WebAssembly fast?


JS Early Days
JS Today
What makes WebAssembly fast?

WebAssembly

JavaScript
What makes WebAssembly fast?

Parsing
What makes WebAssembly fast?

Compiling + Optimizing
What makes WebAssembly fast?

Reoptimizing
What makes WebAssembly fast?

Execution
What makes WebAssembly fast?

Garbage Collection
What makes WebAssembly fast?
State of WebAssembly
State of WebAssembly


State of WebAssembly

Trampolining
State of WebAssembly

No direct DOM Manipulation
State of WebAssembly

Demo


WebAssembly
By pat310
WebAssembly
- 1,771