Benchmark: array buffer to hex conversion 5 methods vs base64 2 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("");
}

function arrayBufferToBase64(buffer) {
  const byteArray = new Uint8Array(buffer);
  const binaryString = byteArray.reduce((acc, byte) => acc + String.fromCharCode(byte), "");
  return btoa(binaryString);
}

function arrayBufferToBase64loop( buffer ) {
    var binary = '';
    var bytes = new Uint8Array( buffer );
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return window.btoa( binary );
}

Tests:

directly set
arrayBufferToHexString(saltVal);
push values
bytesToHexString(saltVal)
buf2hex()
buf2hex(saltVal)
precomputed ASCII with shift
hex(saltVal)
array prototype map
hex2(saltVal)
base64
arrayBufferToBase64(saltVal)
base64 loop
arrayBufferToBase64loop(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
base64
base64 loop

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	2518190.2 Ops/sec
push values	3320277.8 Ops/sec
buf2hex()	1633906.6 Ops/sec
precomputed ASCII with shift	861667.0 Ops/sec
array prototype map	1007366.4 Ops/sec
base64	3442614.0 Ops/sec
base64 loop	4389549.5 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark conducted on MeasureThat.net focuses on performance comparisons for converting an `ArrayBuffer` to two different formats: hexadecimal (hex) and base64. It includes five different methods for converting `ArrayBuffer` to hex and two methods for base64 conversion. Here's a breakdown of the tested methods, their pros and cons, and other considerations:

### Hexadecimal Conversion Methods

1. **arrayBufferToHexString**
   - **Description**: Converts an `ArrayBuffer` to hex format by directly accessing and converting each byte.
   - **Pros**: Simple and straightforward implementation.
   - **Cons**: For larger buffers, the performance might degrade due to creating a new array and processing each byte sequentially.

2. **bytesToHexString**
   - **Description**: Similar to `arrayBufferToHexString`, but uses an intermediate array to push values.
   - **Pros**: May be clearer in intent with the separate step for collecting hex values.
   - **Cons**: This method likely introduces more overhead with the extra array push operations compared to direct setting.

3. **buf2hex**
   - **Description**: Utilizes the spread operator to create a new `Uint8Array`, mapping each byte to hex.
   - **Pros**: The use of modern JavaScript features may improve readability.
   - **Cons**: Performance might be slower than other methods due to the creation of an intermediate array.

4. **hex**
   - **Description**: Uses a precomputed ASCII array and converts bytes using bitwise operations to map to ASCII character codes.
   - **Pros**: More direct conversion which may improve performance for larger inputs since it eliminates some overhead.
   - **Cons**: Slightly more complex and relies on bit manipulation, which might be less intuitive for some developers.

5. **hex2**
   - **Description**: Uses the `Array.prototype.map` method to convert each byte to hex and join into a string.
   - **Pros**: Clean and concise syntax thanks to functional programming approaches.
   - **Cons**: Depending on the engine's optimization, it can be less performant compared to traditional loops.

### Base64 Conversion Methods

1. **arrayBufferToBase64**
   - **Description**: Converts an `ArrayBuffer` to a binary string and then encodes it to base64 using `btoa`.
   - **Pros**: Straightforward implementation leveraging existing methods.
   - **Cons**: Creating a full binary string first can lead to higher memory usage and slower performance for larger buffers.

2. **arrayBufferToBase64loop**
   - **Description**: Iteratively constructs a binary string from the `ArrayBuffer` and encodes it to base64 using `btoa`.
   - **Pros**: This method allows for a streamlined approach that works directly with the bytes.
   - **Cons**: Because it builds the binary string character by character, it may also suffer performance issues for larger inputs.

### Benchmark Results

From the benchmark results, the following observations can be made:

- **Base64 Loop** was the fastest method with **4,389,549.5 executions per second**.
- **Base64** was the second fastest at **3,442,614.0 executions per second**.
- Among the hexadecimal methods, **push values** performed best with **3,320,277.75 executions per second**, followed by **directly set** and others, with varying levels of performance that suggest trade-offs in access patterns, memory management, and array manipulation efficiency.

### Other Considerations

- **Memory Usage**: While optimizing for speed, the memory overhead of additional arrays or strings is an important consideration, particularly in environments with limited resources.
- **Use Case Suitability**: Developers will also consider which method is more readable and maintainable within their projects. In some cases, the speed difference may be negligible for smaller datasets but significant for larger ones.
- **Compatibility**: All methods provided here are compatible with modern browsers, but older JavaScript engines may not fully support features like the spread operator.

### Alternatives

Other alternatives for converting `ArrayBuffer` to hex or base64 could include:

- Utilizing existing libraries like `buffer` in Node.js that offer optimized methods for conversions.
- Web APIs such as `TextEncoder` and `TextDecoder` to handle conversions if encoding and decoding strings are necessary.
- Using WebAssembly (Wasm) for performance-critical applications where such conversions take place frequently, utilizing compiled code for potential significant performance improvements.

Overall, the choice of method depends on the specific constraints of the project, including performance requirements relative to memory usage and code maintainability.

Related benchmarks:

array buffer to hex conversion 5 methods vs base64 2 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 vs base64 vs base64 loop

Created: 13 days ago by: Guest

Jump to the latest result

directly set

push values

buf2hex()

precomputed ASCII with shift

array prototype map

base64

base64 loop

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):