Benchmark: Convert bytes to binary string

Convert bytes to binary string (version: 1)

To use browser's atob() or btoa(), we need to convert between bytes and so-called "binary" string. This test convert bytes to "binary" string, for future calls of btoa(), i.e. encoding bytes (in the form of binary string) to base64.

Comparing performance of: Array.from + join + fromCodePoint vs Array.from + join + fromCharCode vs Array.reduce + fromCodePoint vs Array.reduce + fromCharCode vs String concatenation + fromCodePoint vs String concatenation + fromCharCode vs Function.apply + Array.reduce+ fromCodePoint (chunked) vs Function.apply + Array.reduce + fromCharCode (chunked) vs Function.apply + String concatenation + fromCodePoint (chunked) vs Function.apply + String concatenation + fromCharCode (chunked) vs Function.apply + Array.reduce+ fromCodePoint (small chunks) vs Function.apply + Array.reduce + fromCharCode (small chunks) vs Function.apply + String concatenation + fromCodePoint (small chunks) vs Function.apply + String concatenation + fromCharCode (small chunks) vs utf-16 TextDecoder

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(128);

const utf16decoder = new TextDecoder('utf-16');

// An example result:
// 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(128);​const utf16decoder = new TextDecoder('utf-16');​// An example result:// const binString = Array.from(bytes, (byte) => String.fromCodePoint(byte)).join("");

Tests:

Array.from + join + fromCodePoint
return Array.from(bytes, (byte) => String.fromCodePoint(byte), ).join("");
return Array.from(bytes, (byte) =>
String.fromCodePoint(byte),
).join("");
Array.from + join + fromCharCode
return Array.from(bytes, (byte) => String.fromCharCode(byte), ).join("");
return Array.from(bytes, (byte) =>
String.fromCharCode(byte),
).join("");
Array.reduce + fromCodePoint
return bytes.reduce((s, byte) => s + String.fromCodePoint(byte), "");
return bytes.reduce((s, byte) => s + String.fromCodePoint(byte), "");
Array.reduce + fromCharCode
return bytes.reduce((s, byte) => s + String.fromCharCode(byte), "");
return bytes.reduce((s, byte) => s + String.fromCharCode(byte), "");
String concatenation + fromCodePoint
let s = ''; for (const byte of bytes) { s += String.fromCodePoint(byte); } return s;
let s = '';
for (const byte of bytes) {
s += String.fromCodePoint(byte);
}
return s;
String concatenation + fromCharCode
let s = ''; for (const byte of bytes) { s += String.fromCharCode(byte); } return s;
let s = '';
for (const byte of bytes) {
s += String.fromCharCode(byte);
}
return s;
Function.apply + Array.reduce+ fromCodePoint (chunked)
const QUANTUM = 32768; const chunks = []; for (let i = 0; i < bytes.length; i += QUANTUM) { chunks.push(bytes.slice(i, i + QUANTUM)); } return chunks.reduce((s, i) => s + String.fromCodePoint.apply(null, i), '');
const QUANTUM = 32768;
const chunks = [];
for (let i = 0; i < bytes.length; i += QUANTUM) {
chunks.push(bytes.slice(i, i + QUANTUM));
}
return chunks.reduce((s, i) => s + String.fromCodePoint.apply(null, i), '');
Function.apply + Array.reduce + fromCharCode (chunked)
const QUANTUM = 32768; const chunks = []; for (let i = 0; i < bytes.length; i += QUANTUM) { chunks.push(bytes.slice(i, i + QUANTUM)); } return chunks.reduce((s, i) => s + String.fromCharCode.apply(null, i), '');
const QUANTUM = 32768;
const chunks = [];
for (let i = 0; i < bytes.length; i += QUANTUM) {
chunks.push(bytes.slice(i, i + QUANTUM));
}
return chunks.reduce((s, i) => s + String.fromCharCode.apply(null, i), '');
Function.apply + String concatenation + fromCodePoint (chunked)
const QUANTUM = 32768; let s = ''; for (let i = 0; i < bytes.length; i += QUANTUM) { s += String.fromCodePoint.apply(null, bytes.slice(i, i + QUANTUM)); } return s;
const QUANTUM = 32768;
let s = '';
for (let i = 0; i < bytes.length; i += QUANTUM) {
s += String.fromCodePoint.apply(null, bytes.slice(i, i + QUANTUM));
}
return s;
Function.apply + String concatenation + fromCharCode (chunked)
const QUANTUM = 32768; let s = ''; for (let i = 0; i < bytes.length; i += QUANTUM) { s += String.fromCharCode.apply(null, bytes.slice(i, i + QUANTUM)); } return s;
const QUANTUM = 32768;
let s = '';
for (let i = 0; i < bytes.length; i += QUANTUM) {
s += String.fromCharCode.apply(null, bytes.slice(i, i + QUANTUM));
}
return s;
Function.apply + Array.reduce+ fromCodePoint (small chunks)
const QUANTUM = 128; const chunks = []; for (let i = 0; i < bytes.length; i += QUANTUM) { chunks.push(bytes.slice(i, i + QUANTUM)); } return chunks.reduce((s, i) => s + String.fromCodePoint.apply(null, i), '');
const QUANTUM = 128;
const chunks = [];
for (let i = 0; i < bytes.length; i += QUANTUM) {
chunks.push(bytes.slice(i, i + QUANTUM));
}
return chunks.reduce((s, i) => s + String.fromCodePoint.apply(null, i), '');
Function.apply + Array.reduce + fromCharCode (small chunks)
const QUANTUM = 128; const chunks = []; for (let i = 0; i < bytes.length; i += QUANTUM) { chunks.push(bytes.slice(i, i + QUANTUM)); } return chunks.reduce((s, i) => s + String.fromCharCode.apply(null, i), '');
const QUANTUM = 128;
const chunks = [];
for (let i = 0; i < bytes.length; i += QUANTUM) {
chunks.push(bytes.slice(i, i + QUANTUM));
}
return chunks.reduce((s, i) => s + String.fromCharCode.apply(null, i), '');
Function.apply + String concatenation + fromCodePoint (small chunks)
const QUANTUM = 128; let s = ''; for (let i = 0; i < bytes.length; i += QUANTUM) { s += String.fromCodePoint.apply(null, bytes.slice(i, i + QUANTUM)); } return s;
const QUANTUM = 128;
let s = '';
for (let i = 0; i < bytes.length; i += QUANTUM) {
s += String.fromCodePoint.apply(null, bytes.slice(i, i + QUANTUM));
}
return s;
Function.apply + String concatenation + fromCharCode (small chunks)
const QUANTUM = 128; let s = ''; for (let i = 0; i < bytes.length; i += QUANTUM) { s += String.fromCharCode.apply(null, bytes.slice(i, i + QUANTUM)); } return s;
const QUANTUM = 128;
let s = '';
for (let i = 0; i < bytes.length; i += QUANTUM) {
s += String.fromCharCode.apply(null, bytes.slice(i, i + QUANTUM));
}
return s;
utf-16 TextDecoder
return utf16decoder.decode(new Uint16Array(bytes));
return utf16decoder.decode(new Uint16Array(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
Array.from + join + fromCodePoint
Array.from + join + fromCharCode
Array.reduce + fromCodePoint
Array.reduce + fromCharCode
String concatenation + fromCodePoint
String concatenation + fromCharCode
Function.apply + Array.reduce+ fromCodePoint (chunked)
Function.apply + Array.reduce + fromCharCode (chunked)
Function.apply + String concatenation + fromCodePoint (chunked)
Function.apply + String concatenation + fromCharCode (chunked)
Function.apply + Array.reduce+ fromCodePoint (small chunks)
Function.apply + Array.reduce + fromCharCode (small chunks)
Function.apply + String concatenation + fromCodePoint (small chunks)
Function.apply + String concatenation + fromCharCode (small chunks)
utf-16 TextDecoder

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 13 days ago)

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
Array.from + join + fromCodePoint	272.6 Ops/sec
Array.from + join + fromCharCode	274.9 Ops/sec
Array.reduce + fromCodePoint	1155.3 Ops/sec
Array.reduce + fromCharCode	1122.5 Ops/sec
String concatenation + fromCodePoint	1423.8 Ops/sec
String concatenation + fromCharCode	1434.4 Ops/sec
Function.apply + Array.reduce+ fromCodePoint (chunked)	532.2 Ops/sec
Function.apply + Array.reduce + fromCharCode (chunked)	1485.3 Ops/sec
Function.apply + String concatenation + fromCodePoint (chunked)	828.0 Ops/sec
Function.apply + String concatenation + fromCharCode (chunked)	1661.4 Ops/sec
Function.apply + Array.reduce+ fromCodePoint (small chunks)	786.5 Ops/sec
Function.apply + Array.reduce + fromCharCode (small chunks)	1554.6 Ops/sec
Function.apply + String concatenation + fromCodePoint (small chunks)	774.1 Ops/sec
Function.apply + String concatenation + fromCharCode (small chunks)	1601.5 Ops/sec
utf-16 TextDecoder	4179.2 Ops/sec

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

The benchmark tests various methods for converting a byte array into a binary string in JavaScript. These approaches primarily differ in their use of string conversion functions, array manipulation methods, and how they handle large data through chunking.

What is Tested:

Conversion Techniques:
- The benchmark evaluates different techniques to convert an array of bytes (Uint8Array) into a binary string using either String.fromCodePoint or String.fromCharCode.
Implementation Variations:
- Several implementations are benchmarked:
  - Using Array.from with join.
  - Using Array.prototype.reduce.
  - Using traditional for...of loops for string concatenation.
  - Employing chunking techniques to manage large data sizes.
TextDecoder (utf-16):
- The TextDecoder class is tested specifically for its efficiency in decoding a Uint16Array from the byte input, which offers a contrast to manually converting strings.

Individual Test Cases:

Array.from with String.fromCodePoint and String.fromCharCode:
- Approach: Combines mapping each byte to its corresponding character and joining them into a single string.
- Pros: Clean and functional syntax; supports modern JavaScript.
- Cons: Could be less performant for large sizes due to creating intermediate arrays and string joins.
Array.reduce:
- Approach: Uses the reduce function to accumulate a string by applying a conversion function.
- Pros: Functional approach with concise syntax; reduces the complexity of manual loops.
- Cons: May introduce performance overhead due to closures and function invocations.
String Concatenation with for...of:
- Approach: Iterates through bytes and concatenates the string directly.
- Pros: Straightforward implementation; more memory-efficient for large strings because it reduces temporary buffer creation.
- Cons: In JavaScript, naive string concatenation can lead to performance degradation because strings are immutable. However, given the nature of the data, it remains a practical choice.
Chunking Methods:
- Approach: Processes the data in chunks using Function.apply. This method reduces the size of each function call by grouping bytes.
- Pros: Good for handling large datasets without overwhelming the stack or causing performance bottlenecks.
- Cons: Complexity increases with chunk management, and the performance can vary based on chunk size.
TextDecoder with Uint16Array:
- Approach: Uses the TextDecoder API for converting bytes to text, leveraging built-in browser capabilities.
- Pros: Likely the most efficient in terms of decoding speed and memory usage, as it's optimized in the browser.
- Cons: Relies on the availability of TextDecoder, which may not be supported in all environments or may not be as flexible as manual methods for certain types of encoding.

Considerations:

Each method involves trade-offs between conciseness, performance, and memory usage. The choice of method may depend on the specific use case, including the size of the byte array and performance requirements.
In practical applications, profiling these methods under real-world conditions (i.e., with various data sizes) can yield insights into the best performing approach.

Alternatives:

Aside from the methods listed above, alternatives could include:

Using Buffer in Node.js for byte manipulation and conversions, especially if the focus is on server-side applications.
Implementing web workers for offloading heavy computation tasks if this conversion is part of a web application that necessitates UI responsiveness.
Leveraging existing libraries that specialize in encoding/decoding binary data formats in JavaScript, such as base64-js for base64 operations or pako for compression tasks.

Overall, understanding these benchmarks provides valuable insights into optimizing text encoding conversion in JavaScript.

LLMs can make mistakes. Check important info.

### What is Tested:

1. **Conversion Techniques**:
   - The benchmark evaluates different techniques to convert an array of bytes (`Uint8Array`) into a binary string using either `String.fromCodePoint` or `String.fromCharCode`.

2. **Implementation Variations**:
   - Several implementations are benchmarked:
     - Using `Array.from` with `join`.
     - Using `Array.prototype.reduce`.
     - Using traditional `for...of` loops for string concatenation.
     - Employing chunking techniques to manage large data sizes.

3. **TextDecoder (utf-16)**:
   - The `TextDecoder` class is tested specifically for its efficiency in decoding a `Uint16Array` from the byte input, which offers a contrast to manually converting strings.

### Individual Test Cases:

1. **Array.from with `String.fromCodePoint` and `String.fromCharCode`**:
   - **Approach**: Combines mapping each byte to its corresponding character and joining them into a single string.
   - **Pros**: Clean and functional syntax; supports modern JavaScript.
   - **Cons**: Could be less performant for large sizes due to creating intermediate arrays and string joins.

2. **Array.reduce**:
   - **Approach**: Uses the `reduce` function to accumulate a string by applying a conversion function.
   - **Pros**: Functional approach with concise syntax; reduces the complexity of manual loops.
   - **Cons**: May introduce performance overhead due to closures and function invocations.

3. **String Concatenation with `for...of`**:
   - **Approach**: Iterates through bytes and concatenates the string directly.
   - **Pros**: Straightforward implementation; more memory-efficient for large strings because it reduces temporary buffer creation.
   - **Cons**: In JavaScript, naive string concatenation can lead to performance degradation because strings are immutable. However, given the nature of the data, it remains a practical choice.

4. **Chunking Methods**:
   - **Approach**: Processes the data in chunks using `Function.apply`. This method reduces the size of each function call by grouping bytes.
   - **Pros**: Good for handling large datasets without overwhelming the stack or causing performance bottlenecks.
   - **Cons**: Complexity increases with chunk management, and the performance can vary based on chunk size.

5. **TextDecoder with `Uint16Array`**:
   - **Approach**: Uses the `TextDecoder` API for converting bytes to text, leveraging built-in browser capabilities.
   - **Pros**: Likely the most efficient in terms of decoding speed and memory usage, as it's optimized in the browser.
   - **Cons**: Relies on the availability of `TextDecoder`, which may not be supported in all environments or may not be as flexible as manual methods for certain types of encoding.

### Considerations:

- Each method involves trade-offs between conciseness, performance, and memory usage. The choice of method may depend on the specific use case, including the size of the byte array and performance requirements.
- In practical applications, profiling these methods under real-world conditions (i.e., with various data sizes) can yield insights into the best performing approach.

### Alternatives:

Aside from the methods listed above, alternatives could include:
- Using `Buffer` in Node.js for byte manipulation and conversions, especially if the focus is on server-side applications.
- Implementing web workers for offloading heavy computation tasks if this conversion is part of a web application that necessitates UI responsiveness.
- Leveraging existing libraries that specialize in encoding/decoding binary data formats in JavaScript, such as `base64-js` for base64 operations or `pako` for compression tasks.

Overall, understanding these benchmarks provides valuable insights into optimizing text encoding conversion in JavaScript.

Related benchmarks: