Introduction to WebAssembly

WebAssembly (WASM) – A Deep Dive: Part 1

This post kicks off a series exploring WebAssembly. Find links to other parts of the series below.

WebAssembly, or WASM, is a low-level, assembly-like language designed to run applications built using various programming languages within a web browser. Its cross-platform nature and low-level design deliver near-native speed, unlocking web capabilities previously impossible with JavaScript alone. If you've longed for faster web apps capable of handling computationally intensive tasks, WASM is the solution. This introduction will cover WASM's core functionality, its origins, and how to begin using it.

What is WebAssembly?

WebAssembly is a low-level compilation target specifically designed for web browsers. It's not a language for direct execution; instead, it defines an assembly-like structure that other languages compile into. This "compilation target" aspect is key.

Consider this C code example:

<code class="language-c">int a = 1;
int b = 2;
int c = a + b;</code>

A C compiler translates this into assembly instructions (or machine code):

<code class="language-assembly">mov eax, 1    ; Load 1 into register EAX
mov ebx, 2    ; Load 2 into register EBX
add eax, ebx  ; Add EAX and EBX, result in EAX</code>

This, in turn, produces a binary representation:

<code>00000000000000000000000000000011</code>

(Note: The exact binary output varies depending on CPU architecture. This is a simplified illustration.)

The C code transforms into assembly, then binary—directly executable by the computer. WebAssembly modifies this process. Instead of standard assembly, the compiler might produce:

<code>$a int
$b int
$c int

set $a 1
set $b 2
set $c = add $a $b</code>

(This is a hypothetical syntax for illustrative purposes only, not actual WASM syntax.)

If all browsers understood this syntax, it would revolutionize web development. Compilers for languages like C , Rust, and Go could generate this output, enabling browser execution of programs written in any language, regardless of operating system or browser.

The W3C-defined WebAssembly specification ensures consistent browser handling of WASM. Major browsers already support WebAssembly natively.

WebAssembly Representations

WebAssembly has two primary formats:

• WAT (WebAssembly Text): A textual format for debugging and code understanding.
• WASM (WebAssembly Module): A binary format for browser execution.

These formats are interchangeable; WAT can be converted to WASM, and vice-versa. Compiling to either is possible.

Basic WebAssembly Syntax (WAT)

Let's revisit our example using WAT:

1. Declare three 32-bit integer variables:

<code class="language-c">int a = 1;
int b = 2;
int c = a + b;</code>

2. Assign values:

<code class="language-assembly">mov eax, 1    ; Load 1 into register EAX
mov ebx, 2    ; Load 2 into register EBX
add eax, ebx  ; Add EAX and EBX, result in EAX</code>

3. Add and store the result:

<code>00000000000000000000000000000011</code>

WebAssembly utilizes a stack machine. get_local pushes values onto the stack, i32.add adds the top two stack elements, and set_local stores the result. The WASM binary equivalent is:

<code>$a int
$b int
$c int

set $a 1
set $b 2
set $c = add $a $b</code>

While this might seem complex, remember that WASM is a compilation target, not a primary programming language. You'll typically write code in higher-level languages and compile to WASM.

Will WebAssembly Replace JavaScript?

No. WASM is designed to complement JavaScript, not replace it. JavaScript excels at DOM manipulation and basic web interactions, while WASM handles computationally intensive tasks with near-native performance. This synergy allows for efficient task distribution.

WebAssembly Use Cases

WASM's performance makes it ideal for:

1. Image and video processing
2. Games (including 3D)
3. Music applications
4. Cryptography
5. Visualization tools
6. Simulators and emulators

Examples of existing WASM applications include Figma, Amazon Prime Video, and Google Earth.

WebAssembly Beyond the Browser

While initially browser-focused, WASM's capabilities extend beyond the web through WASI (WebAssembly System Interface). WASI provides standard APIs, enabling the creation of cross-platform applications from a single binary, eliminating the need for platform-specific builds.

Before WebAssembly

Several previous projects attempted to run other languages in browsers, but often faced limitations due to lack of standardization, security vulnerabilities, or performance issues (ActiveX, Java Applets, Flash, NaCl, asm.js, Dart). WebAssembly addresses these shortcomings through standardization, portability, security, performance, and extensibility.

Conclusion

This introduction provides a high-level overview of WebAssembly. Subsequent posts will delve deeper into specific topics and explore practical WebAssembly projects.

The above is the detailed content of Introduction to WebAssembly. For more information, please follow other related articles on the PHP Chinese website!