Benchmark: array buffer to hex conversion 5 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('');
}

function hex(arrayBuffer)
{
  	const asciiCodes = new Uint8Array(
    	Array.prototype.map.call(
        	"0123456789abcdef",
        	char => char.charCodeAt()
    	)
	);
  
    const buff = new Uint8Array(arrayBuffer);
    const charCodes = new Uint8Array(buff.length * 2);

    for (let i = 0; i < buff.length; ++i)
    {
        charCodes[i * 2] = asciiCodes[buff[i] >>> 4];
        charCodes[i * 2 + 1] = asciiCodes[buff[i] & 0xf];
    }

    return String.fromCharCode(...charCodes);
}

function hex2(arrayBuffer)
{
    return Array.prototype.map.call(
        new Uint8Array(arrayBuffer),
        n => n.toString(16).padStart(2, "0")
    ).join("");
}

Tests:

directly set
arrayBufferToHexString(saltVal);
push values
bytesToHexString(saltVal)
buf2hex()
buf2hex(saltVal)
precomputed ASCII with shift
hex(saltVal)
array prototype map
hex2(saltVal)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
directly set
push values
buf2hex()
precomputed ASCII with shift
array prototype map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 13 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
directly set	2491597.0 Ops/sec
push values	3310311.5 Ops/sec
buf2hex()	1640268.4 Ops/sec
precomputed ASCII with shift	861354.1 Ops/sec
array prototype map	1204383.1 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 13 days ago):

LLMs can make mistakes. Check important info.

The provided benchmark focuses on measuring the performance of five different methods for converting an ArrayBuffer (a binary data representation) to a hexadecimal string. Let's break down the benchmark, its methods, their pros and cons, and considerations for software engineers.

### Methods Compared

1. **`arrayBufferToHexString(saltVal);` (directly set)**:
   - **Description**: This method creates a new Uint8Array from the ArrayBuffer, iterates over its bytes, converts each byte to a hexadecimal representation, and returns the result as a concatenated string.
   - **Pros**: Simple to understand and implement; straightforward iteration over the bytes.
   - **Cons**: Slightly less efficient due to the creation of an intermediate array (hex[]) and involves string concatenation, which can be slow in a loop.
   
2. **`bytesToHexString(saltVal)` (push values)**:
   - **Description**: Similar to the previous method but uses `push()` to accumulate hexadecimal strings into an array and joins them after the loop.
   - **Pros**: More efficient than direct concatenation as it minimizes the number of operations on strings until the end.
   - **Cons**: Still involves creating an intermediate array, although it performs better than the first method.
   
3. **`buf2hex(saltVal)`**:
   - **Description**: This method leverages the spread operator to directly map the Uint8Array byte values to hexadecimal strings in one statement.
   - **Pros**: Concise and arguably more readable, taking advantage of modern JavaScript syntax for brevity and clarity.
   - **Cons**: Performance can vary across browsers; might not be as optimized for very large arrays compared to more iterative methods.
   
4. **`hex(saltVal)` (precomputed ASCII with shift)**:
   - **Description**: This method precomputes ASCII codes for hexadecimal characters and directly maps from the byte values to the precomputed values.
   - **Pros**: Fastest for lookups due to avoiding conversion on-the-fly; potentially lower overhead due to reduced operations.
   - **Cons**: More complex implementation compared to simpler methods, which could affect maintainability.
   
5. **`hex2(saltVal)` (array prototype map)**:
   - **Description**: Utilizes `Array.prototype.map()` on a newly created Uint8Array to convert byte values to a hex string format.
   - **Pros**: Clear intent and succinct implementation; functional programming style can be more readable for some developers.
   - **Cons**: Performance may degrade with larger sizes due to the overhead of functional calls and array manipulation.

### Benchmark Results

In the benchmark results, **"push values"** using `bytesToHexString` emerged as the fastest method, with **3,310,311.5 executions per second**. The subsequent performances were as follows:

- **"directly set"** (2491597.0 executions/second)
- **"buf2hex()"** (1640268.375 executions/second)
- **"array prototype map"** (1204383.125 executions/second)
- **"precomputed ASCII with shift"** (861354.125 executions/second)

### Considerations and Alternatives

1. **Performance Context**: The results show variances in execution speed, which means choice of method should consider the specific context (e.g., size of ArrayBuffers, frequency of conversion operation).
2. **Readability vs. Performance**: Developers should balance between readability and performance. While concise code is attractive, maintainability and clarity can sometimes take precedence, especially in longer-term projects.
3. **Browser Variability**: Performance characteristics can differ across browsers. It's wise to test benchmarks in the target environments.
4. **Alternatives**:
   - **Using Libraries**: Libraries like **Buffer** (Node.js) or **CryptoJS** could provide built-in methods with potentially optimized performance; however, they may add overhead if not needed directly.
   - **WebAssembly**: For performance-critical applications where binary data handling is crucial, WebAssembly could provide a significant speed-up. Writing the conversion logic in a language like Rust or C and compiling to WebAssembly could be beneficial for larger datasets.
   - **Custom Workers**: For web apps, offloading the conversion to a Web Worker could help keep the UI responsive during heavy processing.

In summary, this benchmark illustrates various approaches to converting binary data to a readable format, weighing performance against complexity and maintainability. Understanding the nuances of these methods can help software engineers optimize their code for different applications effectively.

Related benchmarks:

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

convert array buffer to hex

Comparing performance of: directly set vs push values vs buf2hex() vs precomputed ASCII with shift vs array prototype map

Created: 13 days ago by: Guest

Jump to the latest result

directly set

push values

buf2hex()

precomputed ASCII with shift

array prototype map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 13 days ago):