Benchmark: array buffer to hex conversion 3 methods

Script Preparation code:

var saltVal = crypto.getRandomValues(new Uint8Array(16));

function arrayBufferToHexString(bytes) {
    bytes = new Uint8Array(bytes);
    var hex = new Array(bytes.length);
    for (let i = 0; i < bytes.length; i++) {
        hex[i] = ("0" + bytes[i].toString(16)).slice(-2);
    }
    return hex.join("");
}

function bytesToHexString(bytes) {
    bytes = new Uint8Array(bytes);
    var hexBytes = [];
    for (var i = 0; i < bytes.length; i++) {
        var byteString = bytes[i].toString(16);
        if (byteString.length < 2) byteString = "0" + byteString;
        hexBytes.push(byteString);
    }
    return hexBytes.join("");
}

function buf2hex(buffer) { // buffer is an ArrayBuffer
  return [...new Uint8Array(buffer)]
      .map(x => x.toString(16).padStart(2, '0'))
      .join('');
}

Tests:

directly set
arrayBufferToHexString(saltVal);
push values
bytesToHexString(saltVal)
buf2hex()
buf2hex(saltVal)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
directly set
push values
buf2hex()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:146.0) Gecko/20100101 Firefox/146.0

Browser/OS: Firefox 146 on Linux

View result in a separate tab

Test name	Executions per second
directly set	2439992.5 Ops/sec
push values	4291398.0 Ops/sec
buf2hex()	1953179.2 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

In this benchmark, three different methods are compared for converting an `ArrayBuffer` to a hexadecimal string. Each method has its own approach for iterating through the buffer and constructing the hexadecimal representation, allowing for a performance comparison of these different implementations.

### Methods Compared

1. **`arrayBufferToHexString`**:
   - This function converts an `ArrayBuffer` to a hexadecimal string by creating a new `Uint8Array` from the passed `bytes`, looping through each byte, converting it to a string representation in hexadecimal, and joining them together.
   - **Pros**: 
     - Simple and straightforward implementation.
   - **Cons**: 
     - It constructs an intermediate array of strings, which can incur additional memory overhead. 
     - May be less efficient due to the usage of the `slice` method on the string for padding.

2. **`bytesToHexString`**:
   - Similar to the first method, this function also converts an `ArrayBuffer` to a hexadecimal string. However, it uses an array (`hexBytes`) to collect the hexadecimal strings before joining them at the end.
   - **Pros**:
     - Avoids the potential overhead of modifying the string format (like using `slice`), making the addition of padding explicit.
   - **Cons**:
     - Still constructs an intermediate array, and overall it may introduce similar performance issues as the first method.

3. **`buf2hex`**:
   - This method uses the spread operator to convert the `Uint8Array` directly into an array and maps over it to create the hexadecimal strings. The `padStart` method is used for padding the strings to maintain the correct length.
   - **Pros**:
     - More concise syntax due to the use of modern JavaScript features (spread operator and `map`).
     - Potentially better performance as it operates in a more functional style.
   - **Cons**:
     - The readability can be hampered for those not familiar with ES6+ syntax, making it potentially less approachable for developers who may be used to older JavaScript syntax.

### Benchmark Results

The latest benchmark results show the executions per second for each method run in the Chrome 131 environment:

1. **`push values` (bytesToHexString)**: 3,319,517.25 executions/second
2. **`directly set` (arrayBufferToHexString)**: 2,392,962.5 executions/second
3. **`buf2hex()`**: 1,645,414.375 executions/second

From this data, we can deduce that the **`bytesToHexString`** method performed the best, followed by **`arrayBufferToHexString`**, with **`buf2hex`** being the least performant. This suggests that the way the `Uint8Array` values are aggregated significantly impacts performance.

### Other Considerations

- **Use of `Uint8Array`**: All three methods rely on `Uint8Array`, which is a typed array that accommodates raw binary data efficiently, ideal for handling binary data such as that found in `ArrayBuffer`.
- **Potential Alternative Approaches**: Other alternatives that could be explored include:
  - Using external libraries like `Buffer` (Node.js) or libraries like `he` (for encoding/decoding HE hexadecimal strings), especially when handling larger datasets or requiring additional encoding features.
  - Implementations focusing on performance optimizations, such as using WebAssembly for critical performance-sensitive pathways, especially with larger `ArrayBuffer` sizes.

In conclusion, choosing the right conversion method depends on the specific context and constraints of the application, including performance requirements, readability, and maintainability.

Related benchmarks:

array buffer to hex conversion 3 methods (version: 1)

convert array buffer to hex

Comparing performance of: directly set vs push values vs buf2hex()

Created: one year ago by: Guest

Jump to the latest result

directly set

push values

buf2hex()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):