Benchmark: jQuery 2.2.0 vs Vanilla JS SetText Speed Test

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

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: 6 years ago by: Guest

Jump 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

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days 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.

Latest run results:

Run details: (Test run date: 7 months 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

Test name	Executions per second
Pure JS .innerText	6565932.0 Ops/sec
Pure JS .innerHTML	5159808.0 Ops/sec
Pure JS .textContent	6265722.5 Ops/sec
jQuery .text()	2034201.8 Ops/sec
jQuery .html()	2100714.0 Ops/sec
jQuery .find()	1334961.5 Ops/sec
jQuery .find().html()	1004839.8 Ops/sec

Related benchmarks:

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

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: 6 years ago by: Guest

Jump to the latest result

Pure JS .innerText

Pure JS .innerHTML

Pure JS .textContent

jQuery .text()

jQuery .html()

jQuery .find()

jQuery .find().html()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):