Benchmark: unescape vs TextEncoder vs FileReader v3

Script Preparation code:

var unicodeString = "가나다라마바사아자차카타파하";
var unicodeString_large = "".padStart(30000, unicodeString);
var textEncoder = new TextEncoder();

const PREFIX_STR = "data:text/plain;base64,";

function toBase64FileReader( text ) {
  return new Promise( (resolve, reject) => {
    const reader = new FileReader();
    
    // data:text/plain;base64,...
    reader.onload = () => resolve(reader.result.substr(PREFIX_STR.length));
    reader.onerror = (err) => reject(err);
    
    reader.readAsDataURL(
      new Blob([ new TextEncoder().encode( text ) ], { type: "text/plain" })
    );
  });
}

function toBase64TextEcnder( text ) {
  return btoa( String.fromCharCode(...textEncoder.encode(text)));
}

function toBase64Unscape( text ) {
  return btoa(unescape(encodeURIComponent(text)));
}

​x
 
var unicodeString = "가나다라마바사아자차카타파하";var unicodeString_large = "".padStart(30000, unicodeString);var textEncoder = new TextEncoder();​const PREFIX_STR = "data:text/plain;base64,";​function toBase64FileReader( text ) {  return new Promise( (resolve, reject) => {    const reader = new FileReader();        // data:text/plain;base64,...    reader.onload = () => resolve(reader.result.substr(PREFIX_STR.length));    reader.onerror = (err) => reject(err);        reader.readAsDataURL(      new Blob([ new TextEncoder().encode( text ) ], { type: "text/plain" })    );  });}​function toBase64TextEcnder( text ) {  return btoa( String.fromCharCode(...textEncoder.encode(text)));}​function toBase64Unscape( text ) {  return btoa(unescape(encodeURIComponent(text)));}

Tests:

TextEncoder small (14 chars)
toBase64TextEcnder(unicodeString);
toBase64TextEcnder(unicodeString);
unescape small (14 chars)
toBase64Unscape(unicodeString);
toBase64Unscape(unicodeString);
FileReader small (14 chars)
toBase64FileReader(unicodeString);
toBase64FileReader(unicodeString);
TextEncoder large (30,000 chars)
toBase64TextEcnder(unicodeString_large);
toBase64TextEcnder(unicodeString_large);
unescape large (30,000 chars)
toBase64Unscape(unicodeString_large);
toBase64Unscape(unicodeString_large);
FileReader large (30,000 chars)
toBase64FileReader(unicodeString_large);
toBase64FileReader(unicodeString_large);

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
TextEncoder small (14 chars)
unescape small (14 chars)
FileReader small (14 chars)
TextEncoder large (30,000 chars)
unescape large (30,000 chars)
FileReader large (30,000 chars)

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/114.0.0.0 Safari/537.36

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
TextEncoder small (14 chars)	308914.3 Ops/sec
unescape small (14 chars)	634181.2 Ops/sec
FileReader small (14 chars)	10895.7 Ops/sec
TextEncoder large (30,000 chars)	358.7 Ops/sec
unescape large (30,000 chars)	800.2 Ops/sec
FileReader large (30,000 chars)	2296.8 Ops/sec

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

Measuring performance of different approaches to encoding and decoding strings in JavaScript is crucial for optimizing web applications.

Options Compared:

The benchmark tests three approaches:

unescape: This function decodes a string from a base64-encoded string, which is then decoded into a UTF-16 encoded string.
TextEncoder: This API provides an object that can be used to encode and decode strings using the UTF-8 encoding scheme.
FileReader: This API provides methods for reading files as binary data.

Pros and Cons of each approach:

unescape:
- Pros: Simple, lightweight, widely supported.
- Cons: Can lead to security vulnerabilities if not used carefully (e.g., unescaped data can be executed by a malicious user).
TextEncoder:
- Pros: Efficient, flexible encoding scheme, and supports UTF-8, UTF-16, and other schemes.
- Cons: May require additional setup or configuration for certain use cases.
FileReader:
- Pros: Can handle large files and supports various file types (e.g., images).
- Cons: Resource-intensive, may require a separate thread for reading, and can be slower than native encoding methods.

Library/Library Purpose:

None of the options used in this benchmark use any external libraries. They are all part of the standard JavaScript API.

Special JS Features/Syntax:

btoa(): This function is used to encode a string into base64 format, which is used in two of the test cases (toBase64TextEcnder and toBase64Unscape). It is a shorthand for encoding binary data as a text string.
encodeURIComponent(): This function is used in one of the test cases (toBase64Unscape) to encode the input string before passing it through the unescape function. Its purpose is to ensure that special characters are properly escaped.

Other Alternatives:

If you need to optimize or compare other encoding and decoding methods, consider the following alternatives:

Buffer: JavaScript's built-in Buffer API can be used for efficient binary data processing.
URLSearchParams: This API provides a way to encode and decode URLs using query parameters.
Web Cryptography API: This API allows for cryptographic operations on binary data.

Keep in mind that each of these alternatives has its own set of advantages, disadvantages, and use cases, so it's essential to choose the most suitable one depending on your specific requirements.

LLMs can make mistakes. Check important info.

Measuring performance of different approaches to encoding and decoding strings in JavaScript is crucial for optimizing web applications.

**Options Compared:**

The benchmark tests three approaches:

1. **unescape**: This function decodes a string from a base64-encoded string, which is then decoded into a UTF-16 encoded string.
2. **TextEncoder**: This API provides an object that can be used to encode and decode strings using the UTF-8 encoding scheme.
3. **FileReader**: This API provides methods for reading files as binary data.

**Pros and Cons of each approach:**

1. **unescape**:
	* Pros: Simple, lightweight, widely supported.
	* Cons: Can lead to security vulnerabilities if not used carefully (e.g., unescaped data can be executed by a malicious user).
2. **TextEncoder**:
	* Pros: Efficient, flexible encoding scheme, and supports UTF-8, UTF-16, and other schemes.
	* Cons: May require additional setup or configuration for certain use cases.
3. **FileReader**:
	* Pros: Can handle large files and supports various file types (e.g., images).
	* Cons: Resource-intensive, may require a separate thread for reading, and can be slower than native encoding methods.

**Library/Library Purpose:**

None of the options used in this benchmark use any external libraries. They are all part of the standard JavaScript API.

**Special JS Features/Syntax:**

1. **btoa()**: This function is used to encode a string into base64 format, which is used in two of the test cases (toBase64TextEcnder and toBase64Unscape). It is a shorthand for encoding binary data as a text string.
2. **encodeURIComponent()**: This function is used in one of the test cases (toBase64Unscape) to encode the input string before passing it through the unescape function. Its purpose is to ensure that special characters are properly escaped.

**Other Alternatives:**

If you need to optimize or compare other encoding and decoding methods, consider the following alternatives:

1. **Buffer**: JavaScript's built-in Buffer API can be used for efficient binary data processing.
2. **URLSearchParams**: This API provides a way to encode and decode URLs using query parameters.
3. **Web Cryptography API**: This API allows for cryptographic operations on binary data.

Keep in mind that each of these alternatives has its own set of advantages, disadvantages, and use cases, so it's essential to choose the most suitable one depending on your specific requirements.

Related benchmarks:

unescape vs TextEncoder vs FileReader v3 (version: 3)

Comparing performance of: TextEncoder small (14 chars) vs unescape small (14 chars) vs FileReader small (14 chars) vs TextEncoder large (30,000 chars) vs unescape large (30,000 chars) vs FileReader large (30,000 chars)

Created: one year ago by: Registered User

Jump to the latest result

TextEncoder small (14 chars)

unescape small (14 chars)

FileReader small (14 chars)

TextEncoder large (30,000 chars)

unescape large (30,000 chars)

FileReader large (30,000 chars)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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