Speeding up my Web App with WebAssembly


WebAssembly ? 🤔

In a nutshell 🌰


  • Low-Level Bytecode for the Web
  • V1 shipped as Minimum Viable Product
  • Fast, efficient, portable
  • Uses existing sandboxing tools
  • No Plugin needed
  • Standard and specification through W3C




So JavaScript will be replaced, finally? 🥳

WebAssembly and JavaScript


"WebAssembly is designed to complement JavaScript

not replace it"

StateOfJS 2021



Ok so how can we benefit from WASM? 🤔

GDE in Angular, Web Technologies


Women Techmakers Ambassador


Trainer and Consultant


That's Me

Martina Kraus



WebAssembly for Web Developers


  1. Performance a.k.a "it needs to be fast"
  2. Filling the gaps in the JavaScript language







Runtime performance

(No I/O, databases, HTTP rendering, network traffic)


  • JavaScript
  • WebAssembly



Execution of JavaScript inside the Browser


Source Code



Interpreter / Compiler

Machine Code

Inside V8






But how?


The C++ Toolchain for WebAssembly





  • Drop in Replacement: Cross compiles C/ C++ with LLVM to bytecode and then to wasm
  • emulates whole file system if necessary
  • using WebGL to pretend to be OpenGL
  • Support standard C++ Libs (import via build step)
  • Extends LLVM optimizations with JavaScript optimizations








Ports (WebGL)




Input/ Output-Files


Clang/ LLVM


Emscripten Compiler Frontend


Emscripten SDK Manager


Build pipeline


I need to learn C++ now?

Using existing C++ Code



  • JavaScript has many npm packages but sometimes not enough (and not the best quality)
  • Find libs on other languages (C++ / Rust)




The future of



WebAssembly Threads

  • One of the most important performance additions
  • using POSIX Threads to run parts of your code in parallel
  • a combination of multithreading paradigms on the web:
    • Web Worker as a WebAssembly Thread
    • SharedArrayBuffer for a shared memory




  • Single Instruction, Multiple Data
  • simultaneously performing same operation on multiple data elements
  • compute intensive applications (image processors, audio codecs) will take advantage of SIMD for better peformance



  • WebAssembly ships C++ (and other languages) to the web
  • WASM-binaries faster to download and execute
  • The peak performance of WASM and JavaScript is nearly the same
    • ​but this will change with WebAssembly Threads and SIMD
  • But it's easier with WASM to stay at the "high performance" path
  • Use the ecosystem from other languages too, compile them to WASM






Slides: https://slides.com/martinakraus/speed-with-wasm

Repo: https://github.com/martinakraus/WebAssembly_Demo

Thank you !!!



More with CMake/ Makefiles


A Makefile defines set of tasks to be executed:


Configuration and compilation:

A Makefile defines set of tasks to be executed


A Makefile defines set of tasks to be executed


Speeding up my Web App with WebAssembly

By Martina Kraus

Speeding up my Web App with WebAssembly

WebAssembly Performance talk at bettCode

  • 549