Benchmark: uint8array separate extract vs uint8 interleave extract

Script Preparation code:


function generateRandomUint8Array(length) {
    const array = new Uint8Array(length);
    window.crypto.getRandomValues(array);
    return array;
}

function readInt64LE(bytes, offset) {
    return (bytes[offset] | (bytes[offset + 1] << 8) | (bytes[offset + 2] << 16) | (bytes[offset + 3] << 24) | (bytes[offset + 4] << 32) | (bytes[offset + 5] << 40)) >>> 0;
}

Tests:

interleave
// Example usage: const bytes = generateRandomUint8Array(120); let sp = [] for (let i = 0; i < 8; ++i) { let id = readInt64LE(bytes, (i * 10) + 8); // imageset id [8] let imgIdx0 = bytes[(i * 10) + 16]; // image index 0 [9] let imgIdx1 = bytes[(i * 10) + 17]; // image index 1 [10] sp.push([id, imgIdx0, imgIdx1]) }
separate
// Example usage: const bytes = generateRandomUint8Array(120); let sp = [] for (let i = 0; i < 8; ++i) { let id = readInt64LE(bytes, (i << 3) + 8); // imageset id [8] sp.push(id) } for (let i = 0; i < 8; ++i) { let imgIdx0 = bytes[i+72]; sp.push(imgIdx0) } for (let i = 0; i < 8; ++i) { let imgIdx1 = bytes[i+80]; sp.push(imgIdx1) }

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

interleave

714K/s

separate

690K/s

View exact numbers

✓ interleave: 714,022 ops/sec
• separate: 690,341 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
interleave
separate

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_2_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.2.1

View result in a separate tab

interleave

1.2M/s

separate

1.2M/s

View exact numbers

Test name	Executions per second
✓ interleave	1,202,715 Ops/sec
separate	1,192,205 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 its components to help explain what's being tested.

**Benchmark Overview**

The test measures the performance difference between two approaches:

1. **Interleaving**: This approach extracts image metadata from a Uint8Array, where each byte is associated with multiple fields (e.g., `id`, `imgIdx0`, and `imgIdx1`) that are stored in consecutive bytes.
2. **Separation**: This approach also extracts image metadata but stores each field in its own separate byte.

**Libraries Used**

The benchmark uses the following libraries:

* None explicitly mentioned, but `Uint8Array` is a built-in JavaScript array type for working with 8-bit integers.

However, it's worth noting that the `crypto` module is used in the script preparation code to generate random Uint8Arrays.

**Special JS Features or Syntax**

There are no special JS features or syntax mentioned in the benchmark code. It appears to be standard JavaScript.

**Benchmark Preparation Code Explanation**

The script preparation code generates a random 120-byte Uint8Array using `window.crypto.getRandomValues()` and defines two functions:

* `generateRandomUint8Array(length)`: Creates a new Uint8Array with the specified length, filled with random values.
* `readInt64LE(bytes, offset)`: Reads an unsigned 64-bit integer from the specified bytes at the given offset, using little-endian byte order.

**Options Compared**

The benchmark compares two approaches:

1. **Interleaving**: Extracts metadata by accessing consecutive bytes in a single loop.
2. **Separation**: Extracts metadata by accessing individual bytes for each field in separate loops.

**Pros and Cons of Each Approach**

Here's a brief summary of the pros and cons of each approach:

### Interleaving

* Pros:
	+ May be faster due to reduced memory access overhead.
* Cons:
	+ May lead to cache misses if the browser accesses consecutive bytes that are not contiguous in memory.

### Separation

* Pros:
	+ Can reduce cache misses by accessing individual bytes for each field.
* Cons:
	+ May result in slower performance due to increased memory access overhead.

**Other Considerations**

The benchmark measures the **ExecutionsPerSecond**, which indicates how many iterations of the loop can be executed within one second. The faster execution rate suggests that the browser is better optimized for the interleaving approach.

To improve performance, consider:

* Optimizing the memory layout to minimize cache misses.
* Using SIMD instructions (e.g., SSE/AVX) if available.
* Profile-guided optimization to identify performance bottlenecks.

**Alternatives**

Other alternatives could be explored, such as:

* Using a different data structure or algorithm for metadata extraction.
* Leveraging GPU acceleration using WebGPU or WebGL.
* Optimizing the script preparation code for better cache locality.

uint8array separate extract vs uint8 interleave extract (version: 2) Benchmark.js

Comparing performance of: `interleave vs separate`

Created: 2 years ago by: Registered User

Go to the latest result

interleave

separate

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

uint8array separate extract vs uint8 interleave extract (version: 2) Benchmark.js

Comparing performance of: interleave vs separate

Created: 2 years ago by: Registered User

Go to the latest result

interleave

separate

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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: `interleave vs separate`