Why WebAssembly is faster than JavaScript

WebAssembly vs. JavaScript: A Performance Deep Dive

This post, part of a series on WebAssembly (see other parts here: [link to other parts]), explores why WebAssembly often outperforms JavaScript. Originally published at https://www.php.cn/link/9dded08b6cdd4ef785eb6cc9aa57c075.

JavaScript Execution: A Closer Look

Understanding WebAssembly's speed advantage requires understanding JavaScript's execution process. The diagram below illustrates the stages:

This chart shows the relative time spent in each phase. Note: This is a generalized representation; actual timings vary across browsers and code complexity.

The stages are:

• Parsing: Transforming text-based JavaScript into an Abstract Syntax Tree (AST). This occurs after download.
• Compiling & Optimizing: Modern browsers use Just-In-Time (JIT) compilation. The compiler infers types based on usage, compiles, and caches for reuse, leading to optimization.
• Re-optimizing: The JIT compiler's type assumptions aren't always accurate. Incorrect assumptions necessitate discarding the optimized version and recompiling, adding overhead.
• Execution: Converting code to executable instructions and executing line-by-line.
• Garbage Collection: Cleaning up unused memory, introducing additional overhead.

WebAssembly Execution: A Streamlined Approach

WebAssembly's execution is significantly more streamlined:

The steps are:

• Decoding: Similar to JavaScript parsing, but simpler as WASM doesn't require conversion to complex structures. Post-decoding, module integrity is validated.
• Compiling & Optimizing: WebAssembly's proximity to machine code makes compilation and optimization faster. Static typing eliminates the need for runtime type inference, further accelerating the process. Many optimizations are performed during the build step.
• Execution: The pre-compiled instructions result in much faster execution.

Why WebAssembly Wins

Based on Lin Clark's work, WebAssembly's performance benefits stem from several factors:

• Fetching: Smaller WASM files (even compressed) lead to faster download times.
• Decoding: Faster than JavaScript parsing.
• Compiling & Optimizing: Quicker due to WASM's closeness to machine code and pre-optimization.
• Re-optimizing: Unnecessary due to static typing.
• Execution: Faster due to fewer compiler complexities and optimized instruction sets.
• Garbage Collection: Absent, as memory management is manual.

In conclusion, WebAssembly often surpasses JavaScript in performance due to its streamlined execution model, static typing, and optimized compilation process.

The above is the detailed content of Why WebAssembly is faster than JavaScript. For more information, please follow other related articles on the PHP Chinese website!