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;
}

​x
 
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));
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: 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 4 months ago):

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:

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

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

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

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 4 months ago):