WASM Demo: Main Thread vs Web Worker Comparison

This demo shows the difference between running WebAssembly in the main thread (blocking) vs in a Web Worker (non-blocking).

Quick Start

1. Build the WASM files

Windows (PowerShell):

.\build.ps1

Linux/Mac (Bash):

chmod +x build.sh
./build.sh

This will create:

• web/hello.js - WASM module for main thread
• web/hello-worker.js - WASM module for Web Worker

2. Start the server

Windows (PowerShell):

.\server.ps1

Linux/Mac (Bash):

chmod +x server.sh
./server.sh

3. Open in browser

Navigate to: http://localhost:8000/demo.html

What to Test

The demo page has two panels side-by-side:

Main Thread (Left Panel)

• Runs WASM directly in the main thread
• Blocks the UI during heavy computation
• Try clicking the "Increment Counter" button while heavy computation is running - it won't respond!

Web Worker (Right Panel)

• Runs WASM in a background worker thread
• Keeps UI responsive during computation
• Try clicking the "Increment Counter" button while heavy computation is running - it responds immediately!

Functions

• add(a, b) - Simple addition (instant, for quick testing)
• heavy_computation(iterations) - CPU-intensive computation that demonstrates blocking behavior

Files

• src/hello.c - C source code with WASM functions
• web/demo.html - Comparison demo page
• web/index.html - Original simple demo
• web/worker.js - Web Worker implementation
• build.sh / build.ps1 - Build scripts
• server.sh / server.ps1 - HTTP server scripts

Requirements

• Emscripten - For compiling C to WASM
  • Install from: https://emscripten.org/docs/getting_started/downloads.html
• Python 3 - For the HTTP server (or use any HTTP server)
• Modern browser - Chrome, Firefox, Edge, or Safari with WebAssembly support

Alternative Server Options

If Python isn't available, you can use:

# Node.js
npx http-server web -p 8000

# PHP
php -S localhost:8000 -t web

# Or any other HTTP server