Benchmark: div vs textarea - MeasureThat.net

HTML Preparation code:

<div id='div' style='background:#faebd7;grid-area:console;width:100%;height:76px;resize:none;overflow:auto;font-family:monospace;-webkit-writing-mode:horizontal-tb!important;text-rendering:auto;color:-internal-light-dark(black,#fff);letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-shadow:none;display:inline-block;text-align:start;appearance:auto;background-color:-internal-light-dark(#fff,#3b3b3b);flex-direction:column;cursor:text;white-space:pre-wrap;overflow-wrap:break-word;column-count:initial!important;margin:0;font:400 13.3333px monospace;border-width:1px;border-style:solid;border-color:-internal-light-dark(#767676,#858585);border-image:initial;padding:2px'></div>
<textarea id='textarea'  style='background:#faebd7;grid-area:console;width:100%;height:76px;resize:none;overflow:auto;font-family:monospace;-webkit-writing-mode:horizontal-tb!important;text-rendering:auto;color:-internal-light-dark(black,#fff);letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-shadow:none;display:inline-block;text-align:start;appearance:auto;background-color:-internal-light-dark(#fff,#3b3b3b);flex-direction:column;cursor:text;white-space:pre-wrap;overflow-wrap:break-word;column-count:initial!important;margin:0;font:400 13.3333px monospace;border-width:1px;border-style:solid;border-color:-internal-light-dark(#767676,#858585);border-image:initial;padding:2px'></textarea>

Script Preparation code:

document.getElementById("div").innerHTML="";
document.getElementById("textarea").value="";

Tests:

innerHTML
document.getElementById("div").innerHTML+="abcdefghijk";
innerText
document.getElementById("div").innerText+="abcdefghijk";
textContent
document.getElementById("div").textContent+="abcdefghijk";
valueA
document.getElementById("textarea").value+="abcdefghijk";
valueB
document.getElementById("textarea").value+="abcdefghijk";

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
innerText
textContent
valueA
valueB

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 90 on Windows

View result in a separate tab

Test name	Executions per second
innerHTML	1525.5 Ops/sec
innerText	18.2 Ops/sec
textContent	2220.2 Ops/sec
valueA	2123.6 Ops/sec
valueB	995.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the details of the provided benchmark.

**Benchmark Definition and Script Preparation Code**

The benchmark measures the performance of three DOM properties: `innerHTML`, `innerText`, and `textContent`. The script preparation code is used to clear the contents of both the `div` and `textarea` elements before each test case. This ensures a clean slate for each test, minimizing any potential interference from previous measurements.

**Html Preparation Code**

The HTML preparation code defines the structure of the benchmark page, including two elements: a `div` with an ID of "div" and a `textarea` with an ID of "textarea". The styles applied to these elements are likely used to improve readability and visualization of the results. Specifically:

* `background-color`: set to #faebd7
* `grid-area`: set to "console"
* `width`, `height`, and `resize`: set to fixed values for the `div` element, while the `textarea` is set to auto-values for width, height, and resize.
* Other styles are applied to both elements, including font family, letter spacing, word spacing, text transform, text indent, text shadow, display, text alignment, cursor style, white space, overflow wrap, column count, margin, border width, border style, border color, and border image.

**Individual Test Cases**

Each test case measures the performance of a specific DOM property: `innerHTML`, `innerText`, or `textContent`. The benchmark definition for each test case is a simple assignment statement that sets the value of the corresponding property to a string literal ("abcdefghijk").

Here's a brief explanation of each test case:

1. `innerHTML`: Measures the time it takes to set the innerHTML property of the `div` element.
2. `innerText`: Measures the time it takes to set the innertext property of the `div` element (note that this is an older, deprecated property).
3. `textContent`: Measures the time it takes to set the textContent property of the `div` element.

4-6: Repeat test cases for the `textarea` element using different variations:
	* `valueA` and `valueB`: Measure the time it takes to set the value property of the `textarea` element. The main difference between these two test cases is that they use slightly different styles or padding values, which may affect performance.

**Comparison of Options**

Here's a brief comparison of the three DOM properties:

* **innerHTML**: This property has been deprecated since ECMAScript 5 (2011) in favor of `textContent`. While it's still supported for compatibility reasons, using it can lead to slower performance compared to other options.
* **innerText**: As mentioned earlier, this property is outdated and should not be used. However, some older browsers may still support it.
* **textContent**: This property is the recommended choice, as it provides better performance and more flexibility than `innerHTML`.

**Pros and Cons**

Here are some pros and cons for each option:

* **innerHTML**:
	+ Pros: Wide browser support, easy to use.
	+ Cons: Deprecate since ECMAScript 5, may lead to slower performance compared to other options.
* **innerText**:
	+ Pros: None (as it's an outdated property).
	+ Cons: Should not be used due to deprecation and potential performance issues.
* **textContent**:
	+ Pros: Better performance, more flexible, widely supported.
	+ Cons: Requires more code changes compared to `innerHTML`.

**Other Considerations**

When working with DOM elements, it's essential to consider the following factors:

* **Browser support**: Make sure the browser you're targeting supports the properties and methods being used.
* **Performance optimization**: Use techniques like caching, memoization, or async execution to improve performance when working with DOM elements.
* **Security**: Be mindful of potential security vulnerabilities when manipulating DOM elements, such as setting user-input values.

I hope this detailed explanation helps you understand the benchmark and make informed decisions about your web development projects!

Related benchmarks:

div vs textarea (version: 0)

Comparing performance of: innerHTML vs innerText vs textContent vs valueA vs valueB

Created: 3 years ago by: Guest

Jump to the latest result

innerHTML

innerText

textContent

valueA

valueB

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):