Benchmark: reading textbox: textContent vs substringData

Script Preparation code:

var xs = [...Array(1000).keys()].map(i => {
  var textbox = document.createElement(`div`);
  textbox.contentEditable = true;
  textbox.textContent = [...Array(10000).keys()].map(n => String.fromCharCode(((n+i) % 10) + 65)).join(``);
  return textbox;
});

var t = 0;

Tests:

data.slice
let textbox = xs[(Math.random()*1000)|0]; let i = (Math.random()*9000)|0; let s = textbox.firstChild.data.slice(i, i+100); t += 0|(s.length + s.charCodeAt((Math.random()*100)|0));
substringData
let textbox = xs[(Math.random()*1000)|0]; let i = (Math.random()*9000)|0; let s = textbox.firstChild.substringData(i, 100); t += 0|(s.length + s.charCodeAt((Math.random()*100)|0));
textContent.slice
let textbox = xs[(Math.random()*1000)|0]; let i = (Math.random()*9000)|0; let s = textbox.textContent.slice(i, i+100); t += 0|(s.length + s.charCodeAt((Math.random()*100)|0));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
data.slice
substringData
textContent.slice

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares three approaches to read a substring from a `contentEditable` element: `substringData`, `textContent.slice`, and `data.slice`. The test creates a large text content in a container element and measures the time it takes to access a random character within that content using each approach.

**Options Compared**

1. **substringData**: This method is used to manipulate the underlying data of an element's substring. It returns a new string object representing the extracted substring.
	* Pros: Efficient, as it only copies the necessary characters from the original text content.
	* Cons: Can be slower than other methods due to the overhead of creating a new string object.
2. **textContent.slice**: This method is used to extract a substring from an element's `textContent`. It returns a new string slice representing the extracted substring.
	* Pros: Convenient, as it provides a simple and intuitive way to access text content. Can be faster than `substringData` due to caching benefits.
	* Cons: May require additional memory allocation for the resulting string slice, which can lead to performance issues in rare cases.
3. **data.slice**: This method is used to extract a substring from an element's `data` property (not directly applicable here), but it's mentioned as an alternative in the benchmark code.
	* Pros: None explicitly mentioned, as this method is not suitable for this specific use case.
	* Cons: Not applicable or incorrect for this benchmark.

**Other Considerations**

* **DOM Manipulation**: Creating and manipulating DOM elements can introduce overhead due to garbage collection, reflow, and repaint events. However, in this benchmark, the `contentEditable` element is created only once and reused throughout the test.
* **Browser Variability**: The benchmark results are specific to Chrome 88 on Linux, which might not be representative of other browsers or environments.

**Library Used**

None explicitly mentioned in the provided code snippets. However, it's assumed that the browser and its APIs (e.g., `contentEditable`) provide the necessary functionality for this benchmark.

**Special JS Features/Syntax**

* **contentEditable**: This feature allows an element to be edited directly by the user. In this benchmark, it's used to create a large text content in a container element.
* **`|` Operator**: The bitwise OR operator (`|`) is used as a comment separator (`` `\r\n` ``) and within the `substringData`, `textContent.slice`, and `data.slice` expressions.

**Alternatives**

Other alternatives for accessing or manipulating text content could include:

1. Using `substring` method on the element's `textContent`: `textbox.textContent.substring(i, i+100)`
2. Creating a new `Text` object: `const text = new Text(textbox.firstChild.data); text.slice(i, i+100)`
3. Using a library or framework that provides optimized string manipulation functions.

Keep in mind that these alternatives may not be suitable for this specific use case and might have different performance characteristics.

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36

Browser/OS: Chrome 88 on Linux

View result in a separate tab

Test name	Executions per second
data.slice	313990.1 Ops/sec
substringData	435467.3 Ops/sec
textContent.slice	320497.8 Ops/sec

Related benchmarks:

reading textbox: textContent vs substringData (version: 0)

Comparing performance of: data.slice vs substringData vs textContent.slice

Created: 4 years ago by: Registered User

Jump to the latest result

data.slice

substringData

textContent.slice

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):