Benchmark: String.fromCharCode & btoa vs base64ArrayBuffer function FIXED ON LARGE ARRAY

Script Preparation code:

var bytes = Array.from({length: 1000}, e => 0xff * Math.random() | 0);
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));
base64ArrayBuffer function
base64ArrayBuffer(uint8);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
String.fromCharCode & btoa
base64ArrayBuffer function

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 91 on Windows

View result in a separate tab

Test name	Executions per second
String.fromCharCode & btoa	101340.0 Ops/sec
base64ArrayBuffer function	64331.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its options.

**Benchmark Definition**

The test cases use two different approaches to encode a large array of bytes into Base64 format:

1. `globalThis.btoa(String.fromCharCode.apply(null, uint16))`: This approach uses the built-in `btoa` function, which is a part of the Web API. `String.fromCharCode` is used to create an array of Unicode code points from the input byte array.
2. `base64ArrayBuffer(uint8)`: This approach is implemented in JavaScript code and converts the input byte array into Base64 format using a custom algorithm.

**Options Compared**

The benchmark compares the performance of these two approaches:

* `btoa` (built-in function)
* Custom `base64ArrayBuffer` implementation

**Pros and Cons**

* **Built-in `btoa` Function**
	+ Pros:
		- Implemented in Web API, which means it's optimized for performance.
		- Less error-prone, as it's a standardized function.
	+ Cons:
		- May have some limitations or edge cases not handled well by the implementation.
* **Custom `base64ArrayBuffer` Implementation**
	+ Pros:
		- Can be more efficient in certain scenarios (e.g., larger arrays).
		- Provides direct control over the encoding process, allowing for potential optimizations.
	+ Cons:
		- May introduce errors or performance regressions if not implemented correctly.
		- Not part of the Web API, which means it's not optimized for performance.

**Library and Purpose**

The `btoa` function is a built-in function in JavaScript, introduced in ECMAScript 5. Its purpose is to encode an array of Unicode code points into Base64 format.

**Special JS Feature or Syntax**

None mentioned.

**Other Considerations**

When choosing between these two approaches, consider the following:

* Performance: If you need high-performance encoding for large arrays, the custom implementation might be more efficient.
* Error handling: The built-in `btoa` function has a simpler implementation and is less prone to errors.
* Browser support: Since `btoa` is part of the Web API, it's supported by most modern browsers. However, older browsers may not support it.

**Alternatives**

If you're interested in exploring alternative approaches, consider:

1. Using a dedicated Base64 library or utility function (e.g., `base64-encode`) for encoding and decoding.
2. Implementing the custom encoding algorithm using other programming languages (e.g., C++).
3. Using a different encoding scheme, such as URL-safe Base64.

Keep in mind that these alternatives might introduce additional complexity or performance overhead.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

String.fromCharCode & btoa

base64ArrayBuffer function

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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