Benchmark: jQuery 2.2.0 vs Vanilla JS SetText Speed Test

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

Pure JS .innerText vs Pure JS .innerHTML vs Pure JS .textContent vs jQuery .text() vs jQuery .html() vs jQuery .find() vs jQuery .find().html()

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

Created: 8 years ago by: Guest

Go to the latest result

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/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()
$(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()
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 (iPhone; CPU iPhone OS 17_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.4.1

View result in a separate tab

Pure JS .innerText

6.6M/s

Pure JS .textContent

6.3M/s

Pure JS .innerHTML

5.2M/s

jQuery .html()

2.1M/s

jQuery .text()

2.0M/s

jQuery .find()

1.3M/s

jQuery .find().html()

1.0M/s

View exact numbers

Test name	Executions per second
✓ Pure JS .innerText	6,565,932 Ops/sec
Pure JS .textContent	6,265,722 Ops/sec
Pure JS .innerHTML	5,159,808 Ops/sec
jQuery .html()	2,100,714 Ops/sec
jQuery .text()	2,034,202 Ops/sec
jQuery .find()	1,334,962 Ops/sec
jQuery .find().html()	1,004,840 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down what's being tested in this benchmark, the options compared, their pros and cons, and some additional considerations.

**Benchmarked scenarios:**

The benchmark tests different ways to update the text content of an HTML element on a webpage:

1. `Pure JS .innerText`: Using the `innerText` property directly.
2. `Pure JS .textContent`: Using the `textContent` property directly.
3. `Pure JS .innerHTML`: Using the `innerHTML` property directly.
4. `jQuery .text()`: Using the jQuery `.text()` method.
5. `jQuery .html()`: Using the jQuery `.html()` method.
6. `jQuery .find().html()`: Using the jQuery `.find()` method followed by `.html()`.

**Options compared:**

Each option is compared to measure which one performs faster in this specific test case.

**Pros and Cons of each approach:**

1. **Pure JS (`innerText`, `textContent`, `innerHTML`):**
	* Pros:
		+ No additional overhead from a JavaScript library.
		+ Lightweight and easy to use.
	* Cons:
		+ May not be compatible with older browsers or certain HTML constructs.
2. **jQuery (`text()`, `html()`):**
	* Pros:
		+ Wide browser support, including older versions.
		+ Provides a convenient and readable API for DOM manipulation.
	* Cons:
		+ Requires loading an additional JavaScript library (jQuery).
		+ May have a slightly higher overhead compared to native JavaScript methods.
3. **Mixed approach (`find().html()`):**
	* Pros:
		+ Combines the benefits of both pure JavaScript and jQuery approaches.
	* Cons:
		+ Adds unnecessary complexity by using `find()` for an element that's already available via `document.getElementById()`.
4. **Native DOM manipulation (using `el` variable directly on `document.getElementById("foo")`):**
	* Pros:
		+ No additional overhead from a JavaScript library.
		+ Can be more efficient, as it avoids the overhead of calling jQuery methods.
	* Cons:
		+ Requires manual handling of HTML element selection and manipulation.

**Additional considerations:**

1. **Browser support:** The benchmark uses Mobile Safari 17 on an iPhone running iOS 17.4.1, which may not represent the full range of browser support for these methods.
2. **HTML structure:** The webpage contains a simple `<div>` with an ID of "foo", which might be too basic to represent real-world scenarios where more complex HTML structures are used.
3. **Test case specificity:** This benchmark is specific to updating text content and may not accurately reflect performance characteristics for other DOM manipulation tasks.

**Alternatives:**

Other alternatives for updating text content include:

1. `el.outerHTML`: Replaces the entire contents of an element with new HTML.
2. `el.innerHTML = el.textContent + "\n";` (not tested in this benchmark): Appends a newline character to the end of the text content.

Keep in mind that performance differences between these approaches might be negligible or dependent on specific use cases and browser versions.