Benchmark: wasm vs webcrypto

HTML Preparation code:

  <script src="https://snack-x.github.io/wasm-works/modules/EventEmitter.js?v=1.0.0"></script>
  <script src="https://snack-x.github.io/wasm-works/modules/WasmSHA256.js?v=1.0.1"></script>
  <script src="https://snack-x.github.io/wasm-works/js/demo_sha256.js?v=1.0.1"></script>

Script Preparation code:

var data = new Uint32Array(1024);
  window.crypto.getRandomValues(data);
  var dataBuffer = new Uint8Array(data);
  data = String.fromCharCode.apply(null, dataBuffer);

  var sha256 = new WasmSHA256();


  fetch("https://snack-x.github.io/wasm-works/modules/sha256.wasm?v=1.0.2")
    .then(res => res.arrayBuffer())
    .then(buffer => {
      sha256.loadWasmBuffer(buffer);

      sha256.on("ready", onModuleReady);
    });

Tests:

wasm
console.log(sha256.hashString(data));
webcrypto
crypto.subtle.digest("SHA-256", dataBuffer ).then(function (hash) {console.log(hash);});

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 21 runs

webcrypto

242K/s

wasm

0/s

View exact numbers

✓ webcrypto: 242,365 ops/sec
• wasm: 0 ops/sec

Firefox 5 runs

webcrypto

237K/s

wasm

0/s

View exact numbers

✓ webcrypto: 236,526 ops/sec
• wasm: 0 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
wasm
webcrypto

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Browser/OS: Chrome 136 on Linux

View result in a separate tab

webcrypto

84K/s

wasm

11K/s

View exact numbers

Test name	Executions per second
✓ webcrypto	84,003 Ops/sec
wasm	11,337 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared, and the pros and cons of each approach.

**What is being tested?**

The benchmark compares two approaches:

1. **Web Cryptography API (Webcrypto)**: This is a set of APIs provided by modern browsers to perform cryptographic operations, such as hashing.
2. **WASM (WebAssembly)**: A binary format that allows running languages like C and C++ in web browsers, enabling faster and more efficient execution.

The benchmark specifically measures the performance of each approach on hashing data using SHA-256 (Secure Hash Algorithm 256).

**Options compared**

Two options are compared:

1. **WASM**: The benchmark runs a WebAssembly module that uses the `wasm-sha256` library to perform the hash.
2. **Webcrypto**: The benchmark uses the browser's Web Cryptography API to perform the hash.

**Pros and Cons of each approach:**

* **WASM (Webassembly)**:
	+ Pros:
		- Can be faster than JavaScript implementations due to native compilation
		- More secure, as it runs in a sandboxed environment
	+ Cons:
		- Requires a WebAssembly runtime (e.g., wasm-pack) and a compatible browser
		- May have overhead for loading and compiling the binary
* **Webcrypto**:
	+ Pros:
		- Easy to use and integrate into existing JavaScript code
		- Built-in support in modern browsers, reducing dependencies
	+ Cons:
		- Performance may be slower compared to WASM due to interpretation or compilation steps

**Library usage**

The benchmark uses two libraries:

1. **WasmSHA256**: A WebAssembly module that implements the SHA-256 algorithm.
2. **EventEmitter.js** and **WasmSHA256.js**: These are likely used for loading and executing the WasmSHA256 module.

These libraries enable the use of WASM for cryptographic operations, allowing for performance comparisons with Webcrypto.

**Special JavaScript features**

The benchmark uses two special JavaScript features:

1. **`String.fromCharCode.apply(null, dataBuffer)`**: This is a helper function that converts a Uint8Array to an array of character codes.
2. `fetch()` and `async/await`: These are used for loading the WasmSHA256 module from a URL.

These features demonstrate how modern JavaScript code can be used in conjunction with WebAssembly for performance-critical operations.

**Other alternatives**

If not using WASM or Webcrypto, alternative approaches could include:

1. **Native libraries**: Using native libraries like OpenSSL or other cryptographic implementations to perform hashing.
2. **JavaScript-only solutions**: Implementing the SHA-256 algorithm entirely in JavaScript, which may be slower than the compared options.
3. **Other web assembly modules**: Exploring other WebAssembly modules for different cryptographic algorithms.

Please note that these alternatives might not provide comparable performance to the tested approaches, and their implementation would likely require additional development effort.

wasm vs webcrypto (version: 0)

Comparing performance of: `wasm vs webcrypto`

Created: 6 years ago by: Guest

Go to the latest result

wasm

webcrypto

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 21 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

wasm vs webcrypto (version: 0)

Comparing performance of: wasm vs webcrypto

Created: 6 years ago by: Guest

Go to the latest result

wasm

webcrypto

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 21 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `wasm vs webcrypto`