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
