Benchmark: String.fromCharCode & btoa vs base64ArrayBuffer function FIXED

Script Preparation code:

var bytes = [84,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46];
var uint16 = new Uint16Array(bytes);
var uint8 = new Uint8Array(bytes);

function base64ArrayBuffer(arrayBuffer) {
  var base64    = '';
  var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';

  var bytes         = arrayBuffer;
  var byteLength    = bytes.byteLength;
  var byteRemainder = byteLength % 3;
  var mainLength    = byteLength - byteRemainder;

  var a, b, c, d;
  var chunk;

  // Main loop deals with bytes in chunks of 3
  for (var i = 0; i < mainLength; i = i + 3) {
    // Combine the three bytes into a single integer
    chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];

    // Use bitmasks to extract 6-bit segments from the triplet
    a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
    b = (chunk & 258048)   >> 12; // 258048   = (2^6 - 1) << 12
    c = (chunk & 4032)     >>  6; // 4032     = (2^6 - 1) << 6
    d = chunk & 63;               // 63       = 2^6 - 1

    // Convert the raw binary segments to the appropriate ASCII encoding
    base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
  }

  // Deal with the remaining bytes and padding
  if (byteRemainder == 1) {
    chunk = bytes[mainLength];

    a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2

    // Set the 4 least significant bits to zero
    b = (chunk & 3)   << 4; // 3   = 2^2 - 1

    base64 += encodings[a] + encodings[b] + '==';
  } else if (byteRemainder == 2) {
    chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];

    a = (chunk & 64512) >> 10; // 64512 = (2^6 - 1) << 10
    b = (chunk & 1008)  >>  4; // 1008  = (2^6 - 1) << 4

    // Set the 2 least significant bits to zero;
    c = (chunk & 15)    <<  2 // 15    = 2^4 - 1

    base64 += encodings[a] + encodings[b] + encodings[c] + '=';
  }
  
  return base64;
}

​x
 
var bytes = [84,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46];var uint16 = new Uint16Array(bytes);var uint8 = new Uint8Array(bytes);​function base64ArrayBuffer(arrayBuffer) {  var base64    = '';  var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';​  var bytes         = arrayBuffer;  var byteLength    = bytes.byteLength;  var byteRemainder = byteLength % 3;  var mainLength    = byteLength - byteRemainder;​  var a, b, c, d;  var chunk;​  // Main loop deals with bytes in chunks of 3  for (var i = 0; i < mainLength; i = i + 3) {    // Combine the three bytes into a single integer    chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];​    // Use bitmasks to extract 6-bit segments from the triplet    a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18    b = (chunk & 258048)   >> 12; // 258048   = (2^6 - 1) << 12    c = (chunk & 4032)     >>  6; // 4032     = (2^6 - 1) << 6    d = chunk & 63;               // 63       = 2^6 - 1​    // Convert the raw binary segments to the appropriate ASCII encoding    base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];  }​  // Deal with the remaining bytes and padding  if (byteRemainder == 1) {    chunk = bytes[mainLength];​    a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2​    // Set the 4 least significant bits to zero    b = (chunk & 3)   << 4; // 3   = 2^2 - 1​    base64 += encodings[a] + encodings[b] + '==';  } else if (byteRemainder == 2) {    chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];​    a = (chunk & 64512) >> 10; // 64512 = (2^6 - 1) << 10    b = (chunk & 1008)  >>  4; // 1008  = (2^6 - 1) << 4​    // Set the 2 least significant bits to zero;    c = (chunk & 15)    <<  2 // 15    = 2^4 - 1​    base64 += encodings[a] + encodings[b] + encodings[c] + '=';  }    return base64;}​

Tests:

String.fromCharCode & btoa
globalThis.btoa(String.fromCharCode.apply(null, uint16));
globalThis.btoa(String.fromCharCode.apply(null, uint16));
base64ArrayBuffer function
base64ArrayBuffer(uint8);
base64ArrayBuffer(uint8);

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
String.fromCharCode & btoa
base64ArrayBuffer function

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
String.fromCharCode & btoa	2535201.0 Ops/sec
base64ArrayBuffer function	3994521.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 4 months ago):

Let's dive into the world of JavaScript microbenchmarks!

Benchmark Definition Json

The provided JSON represents a benchmark test that compares two approaches for encoding binary data as base64 strings.

What is tested?

Two options are being compared:

btoa(String.fromCharCode.apply(null, uint16));: This option uses the btoa() function (a browser-specific function) to encode the binary data represented by the uint16 array.
base64ArrayBuffer(uint8);: This option uses a custom implementation of base64 encoding on an array buffer (specifically, the uint8 array).

Options Comparison

Here's a brief overview of each approach:

`btoa(String.fromCharCode.apply(null, uint16));`

Pros:
- Simplistic and easy to understand.
- Optimized for browser environments where btoa() is available.
Cons:
- May be slower due to the overhead of the browser's encoding functions.
- Limited control over the encoding process.

`base64ArrayBuffer(uint8);`

Pros:
- Provides more control over the encoding process, allowing for potential optimizations.
- Not limited by browser-specific functions or limitations.
Cons:
- Requires manual implementation of base64 encoding, which can be complex and error-prone.

Library Used:

In this benchmark, btoa() is a built-in function in modern browsers (including Chrome). Its purpose is to encode a string into a base64-encoded string. The custom implementation in the second test case (base64ArrayBuffer) achieves similar functionality but with more control over the encoding process.

Special JS Feature/ Syntax:

There are no special JavaScript features or syntax used in this benchmark, other than the apply() method in the first test case (which is a common technique for calling functions with an array of arguments).

Other Alternatives:

If you're interested in exploring alternative approaches to base64 encoding, here are a few options:

Base64 module: A popular JavaScript library that provides a simple and efficient implementation of base64 encoding.
atob() function: The browser-specific function for decoding base64-encoded strings (the reverse of btoa()).
Custom implementation using bitwise operations: This approach uses bitwise operators to encode binary data into a base64 string, potentially offering performance benefits over built-in functions like btoa().

I hope this explanation helps you understand the benchmark and its various components!

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Definition Json**

The provided JSON represents a benchmark test that compares two approaches for encoding binary data as base64 strings.

**What is tested?**

Two options are being compared:

1. **`btoa(String.fromCharCode.apply(null, uint16));`**: This option uses the `btoa()` function (a browser-specific function) to encode the binary data represented by the `uint16` array.
2. **`base64ArrayBuffer(uint8);`**: This option uses a custom implementation of base64 encoding on an `array buffer` (specifically, the `uint8` array).

**Options Comparison**

Here's a brief overview of each approach:

### `btoa(String.fromCharCode.apply(null, uint16));`

* **Pros**:
	+ Simplistic and easy to understand.
	+ Optimized for browser environments where `btoa()` is available.
* **Cons**:
	+ May be slower due to the overhead of the browser's encoding functions.
	+ Limited control over the encoding process.

### `base64ArrayBuffer(uint8);`

* **Pros**:
	+ Provides more control over the encoding process, allowing for potential optimizations.
	+ Not limited by browser-specific functions or limitations.
* **Cons**:
	+ Requires manual implementation of base64 encoding, which can be complex and error-prone.

**Library Used:**

In this benchmark, `btoa()` is a built-in function in modern browsers (including Chrome). Its purpose is to encode a string into a base64-encoded string. The custom implementation in the second test case (`base64ArrayBuffer`) achieves similar functionality but with more control over the encoding process.

**Special JS Feature/ Syntax:**

There are no special JavaScript features or syntax used in this benchmark, other than the `apply()` method in the first test case (which is a common technique for calling functions with an array of arguments).

**Other Alternatives:**

If you're interested in exploring alternative approaches to base64 encoding, here are a few options:

1. **`Base64` module**: A popular JavaScript library that provides a simple and efficient implementation of base64 encoding.
2. **`atob()` function**: The browser-specific function for decoding base64-encoded strings (the reverse of `btoa()`).
3. **Custom implementation using bitwise operations**: This approach uses bitwise operators to encode binary data into a base64 string, potentially offering performance benefits over built-in functions like `btoa()`.

I hope this explanation helps you understand the benchmark and its various components!

Related benchmarks:

String.fromCharCode & btoa vs base64ArrayBuffer function FIXED (version: 0)

Comparing performance of: String.fromCharCode & btoa vs base64ArrayBuffer function

Created: 4 years ago by: Guest

Jump to the latest result

String.fromCharCode & btoa

base64ArrayBuffer function