Benchmark: Convert binary string to bytes

Convert binary string to bytes (version: 2)

To use browser's atob() or btoa(), we need to convert between bytes and so-called "binary" string. This test converts "binary" string to bytes, for working with results from atob() calls, which decodes base64 to bytes (in the form of binary string).

Comparing performance of: Uint8Array.from + codePointAt vs Uint8Array.from + charCodeAt vs for-loop + codePointAt vs for-loop + charCodeAt vs for-loop + Uint8Array.from + codePointAt (small chunk) vs for-loop + Uint8Array.from + charCodeAt (small chunk) vs for-loop + Uint8Array.from + codePointAt (big chunk) vs for-loop + Uint8Array.from + charCodeAt (big chunk)

Created: 4 months ago by: Registered User

Jump to the latest result

Script Preparation code:

function get1024Bytes(n) {
  const bytes = new Uint8Array(n * 1024);
  for (let i = 0; i < bytes.length; i += 1) {
    bytes[i] = Math.random() * 0xff;
  }
  return bytes;
}

const bytes = get1024Bytes(1024);

/*
   Note that Function.prototype.apply() has a limit, so not using it to creat binary string here for convenience.
   
   To use it, split the array into smaller chunks first.
   
       String.fromCodePoint.apply(null, bytes);  // bytes.length should not exceed the maximum

   See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
*/

const binString = Array.from(bytes, (byte) => String.fromCodePoint(byte)).join("");

​x
 
function get1024Bytes(n) {  const bytes = new Uint8Array(n * 1024);  for (let i = 0; i < bytes.length; i += 1) {    bytes[i] = Math.random() * 0xff;  }  return bytes;}​const bytes = get1024Bytes(1024);​/*   Note that Function.prototype.apply() has a limit, so not using it to creat binary string here for convenience.      To use it, split the array into smaller chunks first.          String.fromCodePoint.apply(null, bytes);  // bytes.length should not exceed the maximum​   See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply*/​const binString = Array.from(bytes, (byte) => String.fromCodePoint(byte)).join("");

Tests:

Uint8Array.from + codePointAt
return Uint8Array.from(binString, (m) => m.codePointAt(0));
return Uint8Array.from(binString, (m) => m.codePointAt(0));
Uint8Array.from + charCodeAt
return Uint8Array.from(binString, (m) => m.charCodeAt(0));
return Uint8Array.from(binString, (m) => m.charCodeAt(0));
for-loop + codePointAt
const bytes = new Uint8Array(binString.length); for (let i = 0; i < bytes.length; i += 1) { bytes[i] = binString[i].codePointAt(0); } return bytes;
const bytes = new Uint8Array(binString.length);
for (let i = 0; i < bytes.length; i += 1) {
bytes[i] = binString[i].codePointAt(0);
}
return bytes;
for-loop + charCodeAt
const bytes = new Uint8Array(binString.length); for (let i = 0; i < bytes.length; i += 1) { bytes[i] = binString[i].charCodeAt(0); } return bytes;
const bytes = new Uint8Array(binString.length);
for (let i = 0; i < bytes.length; i += 1) {
bytes[i] = binString[i].charCodeAt(0);
}
return bytes;

for-loop + Uint8Array.from + codePointAt (small chunk)

  const QUANTUM = 128;
  const bytes = new Uint8Array(binString.length);
  for (let i = 0; i < binString.length; i += QUANTUM) {
    let j = i;
    for (const b of Uint8Array.from(binString.slice(i, i + QUANTUM), (m) => m.codePointAt(0))) {
        bytes[j] = b;
        j += 1;
    }
  }
  return bytes;

 
  const QUANTUM = 128;  const bytes = new Uint8Array(binString.length);  for (let i = 0; i < binString.length; i += QUANTUM) {    let j = i;    for (const b of Uint8Array.from(binString.slice(i, i + QUANTUM), (m) => m.codePointAt(0))) {        bytes[j] = b;        j += 1;    }  }  return bytes;

for-loop + Uint8Array.from + charCodeAt (small chunk)

  const QUANTUM = 128;
  const bytes = new Uint8Array(binString.length);
  for (let i = 0; i < binString.length; i += QUANTUM) {
    let j = i;
    for (const b of Uint8Array.from(binString.slice(i, i + QUANTUM), (m) => m.charCodeAt(0))) {
        bytes[j] = b;
        j += 1;
    }
  }
  return bytes;

 
  const QUANTUM = 128;  const bytes = new Uint8Array(binString.length);  for (let i = 0; i < binString.length; i += QUANTUM) {    let j = i;    for (const b of Uint8Array.from(binString.slice(i, i + QUANTUM), (m) => m.charCodeAt(0))) {        bytes[j] = b;        j += 1;    }  }  return bytes;

for-loop + Uint8Array.from + codePointAt (big chunk)

  const QUANTUM = 32768;
  const bytes = new Uint8Array(binString.length);
  for (let i = 0; i < binString.length; i += QUANTUM) {
    let j = i;
    for (const b of Uint8Array.from(binString.slice(i, i + QUANTUM), (m) => m.codePointAt(0))) {
        bytes[j] = b;
        j += 1;
    }
  }
  return bytes;

 
  const QUANTUM = 32768;  const bytes = new Uint8Array(binString.length);  for (let i = 0; i < binString.length; i += QUANTUM) {    let j = i;    for (const b of Uint8Array.from(binString.slice(i, i + QUANTUM), (m) => m.codePointAt(0))) {        bytes[j] = b;        j += 1;    }  }  return bytes;

for-loop + Uint8Array.from + charCodeAt (big chunk)

  const QUANTUM = 32768;
  const bytes = new Uint8Array(binString.length);
  for (let i = 0; i < binString.length; i += QUANTUM) {
    let j = i;
    for (const b of Uint8Array.from(binString.slice(i, i + QUANTUM), (m) => m.charCodeAt(0))) {
        bytes[j] = b;
        j += 1;
    }
  }
  return bytes;

 
  const QUANTUM = 32768;  const bytes = new Uint8Array(binString.length);  for (let i = 0; i < binString.length; i += QUANTUM) {    let j = i;    for (const b of Uint8Array.from(binString.slice(i, i + QUANTUM), (m) => m.charCodeAt(0))) {        bytes[j] = b;        j += 1;    }  }  return bytes;

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
Uint8Array.from + codePointAt
Uint8Array.from + charCodeAt
for-loop + codePointAt
for-loop + charCodeAt
for-loop + Uint8Array.from + codePointAt (small chunk)
for-loop + Uint8Array.from + charCodeAt (small chunk)
for-loop + Uint8Array.from + codePointAt (big chunk)
for-loop + Uint8Array.from + charCodeAt (big chunk)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Uint8Array.from + codePointAt	12.1 Ops/sec
Uint8Array.from + charCodeAt	12.9 Ops/sec
for-loop + codePointAt	9.8 Ops/sec
for-loop + charCodeAt	8.5 Ops/sec
for-loop + Uint8Array.from + codePointAt (small chunk)	8.7 Ops/sec
for-loop + Uint8Array.from + charCodeAt (small chunk)	8.7 Ops/sec
for-loop + Uint8Array.from + codePointAt (big chunk)	9.0 Ops/sec
for-loop + Uint8Array.from + charCodeAt (big chunk)	8.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 4 months ago):

The provided benchmark tests the performance of various methods for converting a binary string into a Uint8Array in JavaScript. The benchmark evaluates several approaches using different character extraction methods and chunk sizes.

Comparison of Options

Uint8Array.from + codePointAt:
- Description: This approach leverages the modern Uint8Array.from() method, which constructs a typed array from an array-like object. It uses codePointAt() to retrieve the Unicode code point of each character.
- Pros: Clean and concise syntax, utilizing built-in methods that are optimized.
- Cons: Potential overhead from creating a new array for each call to Uint8Array.from().
Uint8Array.from + charCodeAt:
- Description: Similar to the previous method, but it uses charCodeAt(), which returns the UTF-16 code unit at a specified index.
- Pros: More straightforward than codePointAt() for characters in the Basic Multilingual Plane (BMP).
- Cons: It can lead to incorrect results for characters outside the BMP, as it only returns 16-bit values.
for-loop + codePointAt:
- Description: This method manually iterates over the string and fills a Uint8Array by calling codePointAt() on each character.
- Pros: Allows for more control over the iteration process.
- Cons: More verbose and potentially slower due to the manual iteration compared to built-in functionalities.
for-loop + charCodeAt:
- Description: Similar to the previous approach but uses charCodeAt().
- Pros: Simplicity when dealing with BMP characters.
- Cons: Like before, it has limitations with characters outside the BMP.
Chunked Approaches (Small and Big Chunks):
- Description: In these methods, the binary string is processed in chunks (quantified by the QUANTUM constant), extracting characters in Uint8Array.from() calls within nested loops. Testing includes both codePointAt() and charCodeAt() versions for small and large chunk sizes.
- Pros: Breaks down processing to potentially reduce memory overhead and avoid hitting function call limits.
- Cons: Increased complexity and overhead from repeated slicing of the string and calls to Uint8Array.from(). Performance may diminish with high QUANTUM values.

Libraries and Features

The benchmark utilizes the built-in Uint8Array class, which is part of the Arrays and Typed Arrays API in JavaScript for representing an array of 8-bit unsigned integers. This is particularly useful for handling binary data.

Features & Syntax

codePointAt(): This is a JavaScript string method that returns an integer representing the Unicode code point value of the character at the provided index. It can handle characters outside the standard BMP, which makes it more powerful for Unicode manipulation.
charCodeAt(): This method returns the UTF-16 code unit at a specified index in the string. It is limited to the BMP and can yield incorrect values for characters beyond this range.

Alternatives

When dealing with string to binary conversions in JavaScript, alternative methods could include:

TextEncoder: This modern API allows encoding strings into Uint8Array. It's a high-level and efficient way to convert strings, especially supporting various text encodings.
```
const encoder = new TextEncoder();
const byteArray = encoder.encode(binString);
```
- Pros: Simple and efficient; deals with various encodings natively.
- Cons: Requires awareness of supported encodings and is not available in all environments (especially older browsers).
Manual Conversion: Writing custom conversion functions can provide flexibility at potentially lower performance if not optimized correctly.
Other Libraries: Libraries like buffer in Node.js provide different methods for buffer manipulation and can facilitate binary encoding and decoding.

By applying various approaches to test performance, developers can ascertain the most efficient means of converting binary strings into byte arrays based on the specific needs and target environments of their applications.

LLMs can make mistakes. Check important info.

The provided benchmark tests the performance of various methods for converting a binary string into a `Uint8Array` in JavaScript. The benchmark evaluates several approaches using different character extraction methods and chunk sizes.

### Comparison of Options

1. **`Uint8Array.from + codePointAt`**:
   - **Description**: This approach leverages the modern `Uint8Array.from()` method, which constructs a typed array from an array-like object. It uses `codePointAt()` to retrieve the Unicode code point of each character.
   - **Pros**: Clean and concise syntax, utilizing built-in methods that are optimized.
   - **Cons**: Potential overhead from creating a new array for each call to `Uint8Array.from()`.

2. **`Uint8Array.from + charCodeAt`**:
   - **Description**: Similar to the previous method, but it uses `charCodeAt()`, which returns the UTF-16 code unit at a specified index.
   - **Pros**: More straightforward than `codePointAt()` for characters in the Basic Multilingual Plane (BMP).
   - **Cons**: It can lead to incorrect results for characters outside the BMP, as it only returns 16-bit values.

3. **`for-loop + codePointAt`**:
   - **Description**: This method manually iterates over the string and fills a `Uint8Array` by calling `codePointAt()` on each character.
   - **Pros**: Allows for more control over the iteration process.
   - **Cons**: More verbose and potentially slower due to the manual iteration compared to built-in functionalities.

4. **`for-loop + charCodeAt`**:
   - **Description**: Similar to the previous approach but uses `charCodeAt()`.
   - **Pros**: Simplicity when dealing with BMP characters.
   - **Cons**: Like before, it has limitations with characters outside the BMP.

5. **Chunked Approaches (Small and Big Chunks)**:
   - **Description**: In these methods, the binary string is processed in chunks (quantified by the `QUANTUM` constant), extracting characters in `Uint8Array.from()` calls within nested loops. Testing includes both `codePointAt()` and `charCodeAt()` versions for small and large chunk sizes.
   - **Pros**: Breaks down processing to potentially reduce memory overhead and avoid hitting function call limits.
   - **Cons**: Increased complexity and overhead from repeated slicing of the string and calls to `Uint8Array.from()`. Performance may diminish with high `QUANTUM` values.

### Libraries and Features

The benchmark utilizes the built-in `Uint8Array` class, which is part of the Arrays and Typed Arrays API in JavaScript for representing an array of 8-bit unsigned integers. This is particularly useful for handling binary data.

### Features & Syntax

- **`codePointAt()`**: This is a JavaScript string method that returns an integer representing the Unicode code point value of the character at the provided index. It can handle characters outside the standard BMP, which makes it more powerful for Unicode manipulation.
  
- **`charCodeAt()`**: This method returns the UTF-16 code unit at a specified index in the string. It is limited to the BMP and can yield incorrect values for characters beyond this range.

### Alternatives

When dealing with string to binary conversions in JavaScript, alternative methods could include:

1. **TextEncoder**: This modern API allows encoding strings into `Uint8Array`. It's a high-level and efficient way to convert strings, especially supporting various text encodings.
   ```javascript
   const encoder = new TextEncoder();
   const byteArray = encoder.encode(binString);
   ```
   - **Pros**: Simple and efficient; deals with various encodings natively.
   - **Cons**: Requires awareness of supported encodings and is not available in all environments (especially older browsers).

2. **Manual Conversion**: Writing custom conversion functions can provide flexibility at potentially lower performance if not optimized correctly.

3. **Other Libraries**: Libraries like `buffer` in Node.js provide different methods for buffer manipulation and can facilitate binary encoding and decoding.

Related benchmarks: