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
}

​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 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));
globalThis.btoa(String.fromCharCode.apply(null, bufferArray));
base64ArrayBuffer function
base64ArrayBuffer(bufferArray);
base64ArrayBuffer(bufferArray);

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

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:

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

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