Benchmark: array buffer to hex conversion 8 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 );
}

function bytesToHexString2(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 += byteString;
    }
    return hexBytes;
}

function bytesToHexString3(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) hexBytes += "0";
        hexBytes += byteString;
    }
    return hexBytes;
}

function bytesToHexString4(bytes) {
    bytes = new Uint8Array(bytes);
    var hexBytes = '';
    for (var i = 0; i < bytes.length; i++) {
        hexBytes += bytes[i].toString(16).padStart(2, '0');
    }
    return hexBytes;
}

​x
 
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 );}​function bytesToHexString2(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 += byteString;    }    return hexBytes;}​function bytesToHexString3(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) hexBytes += "0";        hexBytes += byteString;    }    return hexBytes;}​function bytesToHexString4(bytes) {    bytes = new Uint8Array(bytes);    var hexBytes = '';    for (var i = 0; i < bytes.length; i++) {        hexBytes += bytes[i].toString(16).padStart(2, '0');    }    return hexBytes;}​

Tests:

directly set
arrayBufferToHexString(saltVal);
arrayBufferToHexString(saltVal);
push values
bytesToHexString(saltVal)
bytesToHexString(saltVal)
buf2hex()
buf2hex(saltVal)
buf2hex(saltVal)
precomputed ASCII with shift
hex(saltVal)
hex(saltVal)
array prototype map
hex2(saltVal)
hex2(saltVal)
base64
arrayBufferToBase64(saltVal)
arrayBufferToBase64(saltVal)
base64 loop
arrayBufferToBase64loop(saltVal)
arrayBufferToBase64loop(saltVal)
string +
bytesToHexString2(saltVal)
bytesToHexString2(saltVal)
string + 2
bytesToHexString3(saltVal)
bytesToHexString3(saltVal)
string + pad
bytesToHexString4(saltVal)
bytesToHexString4(saltVal)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
directly set
push values
buf2hex()
precomputed ASCII with shift
array prototype map
base64
base64 loop
string +
string + 2
string + pad

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months 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	2449344.0 Ops/sec
push values	3418329.5 Ops/sec
buf2hex()	1701248.1 Ops/sec
precomputed ASCII with shift	864891.2 Ops/sec
array prototype map	1193146.8 Ops/sec
base64	3353756.8 Ops/sec
base64 loop	4347946.5 Ops/sec
string +	5316500.0 Ops/sec
string + 2	5316376.5 Ops/sec
string + pad	4910442.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 months ago):

The benchmark defined in the JSON represents a comparison of various methods for converting an ArrayBuffer to hexadecimal string and base64 encoding in JavaScript. The objective is to evaluate the performance efficiency of these different methods by measuring the number of executions per second for each approach. Here’s a breakdown of the methods being compared, their pros and cons, considerations, and alternatives.

Methods and Considerations

Hexadecimal Conversion Methods

Directly Set (arrayBufferToHexString):
- Description: This method directly loops over the Uint8Array created from the ArrayBuffer and converts each byte to its hexadecimal representation.
- Pros: Simple to understand and directly manipulates the byte data.
- Cons: Potentially slower with larger data sizes due to repetitive string manipulation.
Push Values (bytesToHexString):
- Description: This method uses an array to push hexadecimal byte strings during the conversion and later joins them.
- Pros: Allows for leveraging an array, which can be more efficient for larger sizes when output appended.
- Cons: Addition of more processing steps to push to the array.
buf2hex:
- Description: Utilizes spread syntax with Uint8Array and maps each byte to a hexadecimal string.
- Pros: Utilizes modern JavaScript features, potentially leading to concise code.
- Cons: May incur additional overhead due to creating an intermediate array and spread syntax.
Precomputed ASCII with Shift (hex):
- Description: Constructs a new Uint8Array representing ASCII codes for hex digits and uses bitwise operations to convert each byte.
- Pros: Efficient since it precomputes ASCII values and uses direct index access.
- Cons: Slightly more complex implementation.
Array Prototype Map (hex2):
- Description: Uses Array.prototype.map to iterate through the bytes, converting them to hex.
- Pros: Functional style may improve readability.
- Cons: May introduce overhead from creating callbacks.
bytesToHexString2, bytesToHexString3, bytesToHexString4:
- Description: Different variations of string concatenation methods for converting byte data to hex.
- Pros: Flexibility in performance.
- Cons: Potential inefficiencies due to repeated string concatenation; slower for larger arrays compared to array-based methods.

Base64 Encoding Methods

Base64 (arrayBufferToBase64):
- Description: Converts the ArrayBuffer into a binary string and then encodes it to base64 using btoa.
- Pros: Direct and straightforward approach for base64.
- Cons: Converting to a string may be less efficient for larger data sizes.
Base64 Loop (arrayBufferToBase64loop):
- Description: Loops through the bytes, constructs a binary string, and encodes to base64.
- Pros: Focuses on clarity; similar logic to the straightforward encoding method.
- Cons: Slower due to the manual loop compared to methods that could operate on chunks.

Performance Results

The latest results show significant variations in executions per second among the methods tested:

bytesToHexString2 (string concatenation) exhibits the best performance (5,316,500 executions/second).
bytesToHexString4 and arrayBufferToBase64loop follow closely behind, indicating that string manipulation and loop-based methods may still perform reasonably well.
The more complex methods like buf2hex() and hex() show poorer performance results, potentially due to overhead from more complex operations or abstractions.

Alternatives

While the benchmark tests several methods in pure JavaScript, alternative approaches could include:

WebAssembly: For performance-sensitive applications, implementing these conversions in WebAssembly could provide a notable boost, especially for high-frequency operations.
Dedicated Libraries: Libraries such as Buffer in Node.js or crypto based libraries can handle conversions more efficiently and abstract away these operations, although they may come with their own overheads and dependencies.
Typed Arrays: Other advanced techniques using JavaScript’s typed arrays can be explored for greater efficiency, especially when dealing with raw binary data.

Conclusion

The benchmark allows developers to directly compare multiple approaches for ArrayBuffer conversions, emphasizing the trade-offs between clarity, performance, and complexity. Selecting the right method will depend on the specific use case, data sizes, and performance requirements.

LLMs can make mistakes. Check important info.

### Methods and Considerations

#### Hexadecimal Conversion Methods

1. **Directly Set (`arrayBufferToHexString`)**:
   - **Description**: This method directly loops over the Uint8Array created from the ArrayBuffer and converts each byte to its hexadecimal representation.
   - **Pros**: Simple to understand and directly manipulates the byte data.
   - **Cons**: Potentially slower with larger data sizes due to repetitive string manipulation.

2. **Push Values (`bytesToHexString`)**:
   - **Description**: This method uses an array to push hexadecimal byte strings during the conversion and later joins them.
   - **Pros**: Allows for leveraging an array, which can be more efficient for larger sizes when output appended.
   - **Cons**: Addition of more processing steps to push to the array.

3. **`buf2hex`**:
   - **Description**: Utilizes spread syntax with `Uint8Array` and maps each byte to a hexadecimal string.
   - **Pros**: Utilizes modern JavaScript features, potentially leading to concise code.
   - **Cons**: May incur additional overhead due to creating an intermediate array and spread syntax.

4. **Precomputed ASCII with Shift (`hex`)**:
   - **Description**: Constructs a new Uint8Array representing ASCII codes for hex digits and uses bitwise operations to convert each byte.
   - **Pros**: Efficient since it precomputes ASCII values and uses direct index access.
   - **Cons**: Slightly more complex implementation.

5. **Array Prototype Map (`hex2`)**:
   - **Description**: Uses `Array.prototype.map` to iterate through the bytes, converting them to hex.
   - **Pros**: Functional style may improve readability.
   - **Cons**: May introduce overhead from creating callbacks.

6. **`bytesToHexString2`, `bytesToHexString3`, `bytesToHexString4`**:
   - **Description**: Different variations of string concatenation methods for converting byte data to hex.
   - **Pros**: Flexibility in performance.
   - **Cons**: Potential inefficiencies due to repeated string concatenation; slower for larger arrays compared to array-based methods.

#### Base64 Encoding Methods

1. **Base64 (`arrayBufferToBase64`)**:
   - **Description**: Converts the ArrayBuffer into a binary string and then encodes it to base64 using `btoa`.
   - **Pros**: Direct and straightforward approach for base64.
   - **Cons**: Converting to a string may be less efficient for larger data sizes.

2. **Base64 Loop (`arrayBufferToBase64loop`)**:
   - **Description**: Loops through the bytes, constructs a binary string, and encodes to base64.
   - **Pros**: Focuses on clarity; similar logic to the straightforward encoding method.
   - **Cons**: Slower due to the manual loop compared to methods that could operate on chunks.

### Performance Results

The latest results show significant variations in executions per second among the methods tested:

- **`bytesToHexString2`** (string concatenation) exhibits the best performance (5,316,500 executions/second).
- **`bytesToHexString4`** and **`arrayBufferToBase64loop`** follow closely behind, indicating that string manipulation and loop-based methods may still perform reasonably well.
- The more complex methods like `buf2hex()` and `hex()` show poorer performance results, potentially due to overhead from more complex operations or abstractions.

### Alternatives

While the benchmark tests several methods in pure JavaScript, alternative approaches could include:

1. **WebAssembly**: For performance-sensitive applications, implementing these conversions in WebAssembly could provide a notable boost, especially for high-frequency operations.
  
2. **Dedicated Libraries**: Libraries such as `Buffer` in Node.js or `crypto` based libraries can handle conversions more efficiently and abstract away these operations, although they may come with their own overheads and dependencies.

3. **Typed Arrays**: Other advanced techniques using JavaScript’s typed arrays can be explored for greater efficiency, especially when dealing with raw binary data.

### Conclusion

Related benchmarks:

array buffer to hex conversion 8 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 vs string + vs string + 2 vs string + pad

Created: 5 months ago by: Guest

Jump to the latest result

directly set

push values

buf2hex()

precomputed ASCII with shift

array prototype map

base64

base64 loop

string +

string + 2

string + pad