WebAssembly all the things

Building tiny web applications

WebAssembly was initially designed to enable near-native code execution speed in the web browser

@MartinaKraus11

@MartinaKraus11

Performance?

Performance?

Time to interact

Initial loading time

Execution speed

@MartinaKraus11

WebAssembly wasn't designed to be tiny

@MartinaKraus11

@MartinaKraus11

That's me, Martina

GDE in Angular

 

Women Techmakers Ambassador

 

Trainer and Consultant

@MartinaKraus11

@MartinaKraus11

Initial loading time 

@MartinaKraus11

@MartinaKraus11

https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/

The build chain

@MartinaKraus11

C / C++

Rust

Go

IR

WASM

JS

The build chain

@MartinaKraus11

C / C++

Rust

Go

IR

WASM

JS

Build optimizer

@MartinaKraus11

  • Takes compiled WebAssembly files and run transformation passes on it
  • Integrated: LLVM optimizations, Emscripten
  • wasm-opt

wasm-opt

@MartinaKraus11

  • Part of the Binaryen compiler and toolchain
  • Run:

 

> wasm-opt in.wasm -o final-bundle.wasm

 

Transformation passes

@MartinaKraus11

  • Dead code Elimination (removing duplicates)
  • Memory Packing
  • Simplify Locals/ globals
  • Removing  other redundancies 
  • ...

 

Pass: Inlining

@MartinaKraus11

Pass: Inlining

@MartinaKraus11

Constant propagation

@MartinaKraus11

Constant propagation

@MartinaKraus11

Constant propagation

@MartinaKraus11

Dead Code Elimination

@MartinaKraus11

Profiling WebAssembly Binaries

@MartinaKraus11

DEMO

 

https://webassembly.github.io/binaryen/shrink.html

Emscripten

@MartinaKraus11

Integrated Optimizations:

  • -O0, -O1, -O2, -O3, -O4: execute different amount of optimization passes 
  • -Os: focusing on code size  
  • -Oz: focusing on speed

What else can we do?

@MartinaKraus11

The build chain

@MartinaKraus11

C / C++

Rust

Go

IR

WASM

JS

The build chain

@MartinaKraus11

C / C++

Rust

Go

IR

WASM

JS

Frontend Compiler:

 

  • Clang (C++ / C)
  • Rustc (Rust)
  • Gollvm (Go)

Code Analysis

@MartinaKraus11

  • Use Profiling Tools, 
  • Don't work against your DCE,
  • Know the optimizations of your compiler,
  • Investigate the libraries you are using

 

Emscripten

@MartinaKraus11

Using inline JavaScript / WebAPIs:

 

The build chain

@MartinaKraus11

C / C++

Rust

Go

IR

WASM

JS

Emscripten

@MartinaKraus11

Focusing on WASM in the Browser:

  • -s ENVIRONMENT=web: remove code not needed for the web 
  • --closure 1: reducing the size of the support JavaScript code

Summary

  • Profiling first

  • Know your tools

  • Use wasm-opt to shrink the bundle-size

  • Reduce the initial loading time

@MartinaKraus11

me@martina-kraus.io

@MartinaKraus11

martina-kraus.io

Ping me:

Slides: slides.com/martinakraus/webassembly

Thank you !!!

Web Assembly All The things

By Martina Kraus

Made with Slides.com

Web Assembly All The things

WebAssembly Life.

  • 1,466

More from Martina Kraus