Benchmark: String.fromCharCode & btoa vs base64ArrayBuffer function

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 bufferArray = new Uint16Array(bytes);

function base64ArrayBuffer(arrayBuffer) {
  var base64    = ''
  var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'

  var bytes         = new Uint8Array(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, bufferArray));
base64ArrayBuffer function
base64ArrayBuffer(bufferArray);

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: one year ago)

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

Browser/OS: Chrome 116 on Windows

View result in a separate tab

Test name	Executions per second
String.fromCharCode & btoa	857745.4 Ops/sec
base64ArrayBuffer function	1035957.4 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark is designed to compare two approaches for encoding an array of bytes into a base64-encoded string:

1. `String.fromCharCode` & `btoa`: This approach uses the `String.fromCharCode` method to create a sequence of characters from the given byte values, which are then encoded using the `btoa` (base64 encoding) function.
2. `base64ArrayBuffer` function: This is a custom implementation that directly encodes the array of bytes into a base64-encoded string.

**Options Compared**

The benchmark compares the performance of these two approaches:

* `String.fromCharCode` & `btoa`: Uses a slower, more explicit method to encode the data.
* `base64ArrayBuffer` function: Employs a faster, more optimized algorithm to encode the data.

**Pros and Cons**

**`String.fromCharCode` & `btoa` approach:**

Pros:

* Easier to understand and maintain due to its well-known functions.
* Can be more suitable for developers who are not familiar with low-level encoding algorithms.

Cons:

* Slower performance due to the overhead of creating character sequences using `String.fromCharCode`.
* May have more memory allocations, which can impact performance.

**`base64ArrayBuffer` function approach:**

Pros:

* Faster performance since it uses a custom algorithm optimized for base64 encoding.
* Reduces memory allocations and overhead compared to the `String.fromCharCode` & `btoa` approach.

Cons:

* Requires a deeper understanding of low-level encoding algorithms, which can be challenging for some developers.
* May require more maintenance effort due to its custom implementation.

**Library and Special Features**

In this benchmark, the following libraries or features are used:

* No external libraries are explicitly mentioned, but the `btoa` function is part of the Web API.
* The `String.fromCharCode` method is a built-in JavaScript function.
* No special JavaScript features (like async/await, arrow functions, etc.) are required.

**Alternatives**

Other alternatives for base64 encoding in JavaScript include:

* Using the `Buffer` class from Node.js or other libraries like `base64-js`.
* Implementing a custom base64 encoding algorithm using bitwise operations.
* Utilizing web worker threads to offload encoding tasks.
* Employing modern algorithms like Google's Base64 implementation.

Keep in mind that each alternative has its own trade-offs and requirements, and the choice of which one to use depends on specific needs and constraints.

Related benchmarks:

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

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