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: one month 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("");

Tests:

Array.from + join + fromCodePoint
return Array.from(bytes, (byte) => String.fromCodePoint(byte), ).join("");
Array.from + join + fromCharCode
return Array.from(bytes, (byte) => String.fromCharCode(byte), ).join("");
Array.reduce + fromCodePoint
return bytes.reduce((s, byte) => s + String.fromCodePoint(byte), "");
Array.reduce + fromCharCode
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;
String concatenation + fromCharCode
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), '');
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), '');
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;
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;
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), '');
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), '');
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;
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;
utf-16 TextDecoder
return utf16decoder.decode(new Uint16Array(bytes));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0

Browser/OS: Firefox 134 on Windows

View result in a separate tab

Test name	Executions per second
Array.from + join + fromCodePoint	342.1 Ops/sec
Array.from + join + fromCharCode	351.0 Ops/sec
Array.reduce + fromCodePoint	557.2 Ops/sec
Array.reduce + fromCharCode	558.2 Ops/sec
String concatenation + fromCodePoint	630.6 Ops/sec
String concatenation + fromCharCode	666.8 Ops/sec
Function.apply + Array.reduce+ fromCodePoint (chunked)	1899.9 Ops/sec
Function.apply + Array.reduce + fromCharCode (chunked)	2511.3 Ops/sec
Function.apply + String concatenation + fromCodePoint (chunked)	1989.4 Ops/sec
Function.apply + String concatenation + fromCharCode (chunked)	2319.7 Ops/sec
Function.apply + Array.reduce+ fromCodePoint (small chunks)	1124.8 Ops/sec
Function.apply + Array.reduce + fromCharCode (small chunks)	1212.9 Ops/sec
Function.apply + String concatenation + fromCodePoint (small chunks)	1116.3 Ops/sec
Function.apply + String concatenation + fromCharCode (small chunks)	1171.1 Ops/sec
utf-16 TextDecoder	3681.2 Ops/sec

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

LLMs can make mistakes. Check important info.

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:

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:

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.

Created: one month ago by: Registered User

Jump to the latest 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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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