Benchmark: jQuery vs Vanilla JS SetText Speed Test (not slim)

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="foo">Hello World</div>

Tests:

Pure JS .innerText
var el = document.getElementById("foo"); el.innerText = "New Hello World";
Pure JS .innerHTML
var el = document.getElementById("foo"); el.innerHTML = "New Hello World";
Pure JS .textContent
var el = document.getElementById("foo"); el.textContent = "New Hello World";
jQuery .text()
$("#foo").text("New Hello World");
jQuery .html()
$("#foo").html("New Hello World");
jQuery .find().text()
$(document).find("#foo").text("New Hello World");
jQuery .find().html()
$(document).find("#foo").html("New Hello World");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Pure JS .innerText
Pure JS .innerHTML
Pure JS .textContent
jQuery .text()
jQuery .html()
jQuery .find().text()
jQuery .find().html()

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Pure JS .textContent

4.0M/s

Pure JS .innerText

1.9M/s

Pure JS .innerHTML

1.2M/s

jQuery .text()

795K/s

jQuery .find().text()

579K/s

jQuery .html()

568K/s

jQuery .find().html()

448K/s

View exact numbers

Test name	Executions per second
✓ Pure JS .textContent	4,018,680 Ops/sec
Pure JS .innerText	1,874,591 Ops/sec
Pure JS .innerHTML	1,155,153 Ops/sec
jQuery .text()	794,512 Ops/sec
jQuery .find().text()	578,877 Ops/sec
jQuery .html()	568,171 Ops/sec
jQuery .find().html()	448,310 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the benchmark.

**Benchmark Definition**

The benchmark measures the performance of setting text content using different approaches: pure JavaScript (`innerText`, `innerHTML`, and `textContent`) and jQuery (`text()` and `find().text()`).

**Options Compared**

1. **Pure JS .innerText**: Uses the `innerText` property to set the text content of an element.
2. **Pure JS .innerHTML**: Uses the `innerHTML` property to set the HTML content of an element, which includes both the text and HTML tags.
3. **Pure JS .textContent**: Uses the `textContent` property to set only the text content of an element, without any HTML tags.
4. **jQuery .text()**: Uses jQuery's `text()` method to set the text content of an element.
5. **jQuery .find().text()**: Uses jQuery's `find()` method to select elements and then sets their text content using the `text()` method.

**Pros and Cons**

* **Pure JS .innerText**:
	+ Pros: Fast, lightweight, and widely supported.
	+ Cons: May not work as expected in some cases (e.g., when used with inline styles or events).
* **Pure JS .innerHTML**:
	+ Pros: Works well with HTML tags and attributes, but can be slower due to the overhead of parsing HTML.
	+ Cons: Can lead to security issues if not sanitized properly.
* **Pure JS .textContent**:
	+ Pros: Fast, lightweight, and widely supported, similar to `innerText`.
	+ Cons: May require additional DOM manipulation to set the text content correctly.
* **jQuery .text()**:
	+ Pros: Convenient and easy to use, especially for complex text formatting.
	+ Cons: Can be slower than pure JavaScript approaches, as jQuery needs to parse and manipulate the HTML.
* **jQuery .find().text()**:
	+ Pros: Provides more flexibility by allowing selection of multiple elements, but can be slower due to the overhead of parsing HTML.

**Library/Functionality**

In this benchmark, jQuery is used for its `text()` method. jQuery is a popular JavaScript library that simplifies DOM manipulation and provides a convenient way to select and manipulate elements.

**Special JS Features/Syntax**

None mentioned in the provided information.

**Other Alternatives**

For setting text content using pure JavaScript, other approaches include:

* Using the `DOMStringModifier` API (introduced in ECMAScript 2019)
* Utilizing the `textContent` property with the `replace()` method to remove existing text content before setting new text

These alternatives may offer performance improvements or more concise code, but their implementation and compatibility vary.

Keep in mind that benchmark results can depend on various factors, such as browser versions, JavaScript engines, and system resources.

jQuery vs Vanilla JS SetText Speed Test (not slim) (version: 0) Benchmark.js

Comparing performance of: `Pure JS .innerText vs Pure JS .innerHTML vs Pure JS .textContent vs jQuery .text() vs jQuery .html() vs jQuery .find().text() vs jQuery .find().html()`

Created: 6 years ago by: Registered User

Go to the latest result

Pure JS .innerText

Pure JS .innerHTML

Pure JS .textContent

jQuery .text()

jQuery .html()

jQuery .find().text()

jQuery .find().html()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

jQuery vs Vanilla JS SetText Speed Test (not slim) (version: 0) Benchmark.js

Comparing performance of: Pure JS .innerText vs Pure JS .innerHTML vs Pure JS .textContent vs jQuery .text() vs jQuery .html() vs jQuery .find().text() vs jQuery .find().html()

Created: 6 years ago by: Registered User

Go to the latest result

Pure JS .innerText

Pure JS .innerHTML

Pure JS .textContent

jQuery .text()

jQuery .html()

jQuery .find().text()

jQuery .find().html()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Pure JS .innerText vs Pure JS .innerHTML vs Pure JS .textContent vs jQuery .text() vs jQuery .html() vs jQuery .find().text() vs jQuery .find().html()`