Benchmark: Vanilla JS, Cash and jQuery - SetText Speed Test

Vanilla JS, Cash and jQuery - SetText Speed Test (version: 15)

Comparing performance of: Vanilla JS .innerText vs Vanilla JS .innerHTML vs Vanilla JS .textContent vs Vanilla JS (QuerySelector) .innerText vs Vanilla JS (QuerySelector) .innerHTML vs Vanilla JS (QuerySelector) .textContent vs Vanilla JS (QuerySelectorAll) .innerText vs Vanilla JS (QuerySelectorAll) .innerHTML vs Vanilla JS (QuerySelectorAll) .textContent vs Cash .text vs Cash .html vs jQuery .text() vs jQuery .html() vs jQuery .find() .text() vs jQuery .find() .html()

Created: 9 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"><script>
<script>jQuery.noConflict();</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/7.0.3/cash.min.js"></script>
<div id="foo">Hello World</div>

Tests:

Vanilla JS .innerText
var el = document.getElementById("foo"); el.innerText = "New Hello World";
Vanilla JS .innerHTML
var el = document.getElementById("foo"); el.innerHTML = "New Hello World";
Vanilla JS .textContent
var el = document.getElementById("foo"); el.textContent = "New Hello World";
Vanilla JS (QuerySelector) .innerText
var el = document.querySelector("#foo"); el.innerText = "New Hello World";
Vanilla JS (QuerySelector) .innerHTML
var el = document.querySelector("#foo"); el.innerHTML = "New Hello World";
Vanilla JS (QuerySelector) .textContent
var el = document.querySelector("#foo"); el.textContent = "New Hello World";
Vanilla JS (QuerySelectorAll) .innerText
var el = document.querySelectorAll("#foo"); el.innerText = "New Hello World";
Vanilla JS (QuerySelectorAll) .innerHTML
var el = document.querySelectorAll("#foo"); el.innerHTML = "New Hello World";
Vanilla JS (QuerySelectorAll) .textContent
var el = document.querySelectorAll("#foo"); el.textContent = "New Hello World"
Cash .text
$("#foo").text("New Hello World");
Cash .html
$("#foo").html("New Hello World");
jQuery .text()
jQuery("#foo").text("New Hello World");
jQuery .html()
jQuery("#foo").html("New Hello World");
jQuery .find() .text()
jQuery(document).find("#foo").text("New Hello World");
jQuery .find() .html()
jQuery(document).find("#foo").html("New Hello World");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Vanilla JS .innerText
Vanilla JS .innerHTML
Vanilla JS .textContent
Vanilla JS (QuerySelector) .innerText
Vanilla JS (QuerySelector) .innerHTML
Vanilla JS (QuerySelector) .textContent
Vanilla JS (QuerySelectorAll) .innerText
Vanilla JS (QuerySelectorAll) .innerHTML
Vanilla JS (QuerySelectorAll) .textContent
Cash .text
Cash .html
jQuery .text()
jQuery .html()
jQuery .find() .text()
jQuery .find() .html()

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Related benchmarks: