Benchmark: jQuery vs Vanilla JS GetID Speed Test 22

jQuery vs Vanilla JS GetID Speed Test 22 (version: 0)

Comparing speed of getting element by id with jQuery vs Vanilla JS

Comparing performance of: getElementById() vs getElementsByClassName() vs getElementsByTagName() vs querySelector(#id) vs querySelector(.id) vs querySelectorAll(tag#id) vs querySelectorAll(.id) vs jQuery(#id) vs jQuery(.id) vs jQuery(tag#id) vs jQuery(tag.id) vs jQuery + getElementById vs jQuery + getElementsByClassName

Created: 5 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div id="foo" class="foo2"></div>

Tests:

getElementById()
var el = document.getElementById("foo"); var className = el.className;
getElementsByClassName()
var el = document.getElementsByClassName("foo2"); var className = el.className;
getElementsByTagName()
var el = document.getElementsByTagName("div")[0]; var className = el.className;
querySelector(#id)
var el = document.querySelector('#foo'); var className = el.className;
querySelector(.id)
var el = document.querySelector('.foo2'); var className = el.className;
querySelectorAll(tag#id)
var el = document.querySelectorAll('div#foo'); var className = el.className;
querySelectorAll(.id)
var el = document.querySelectorAll('.foo2'); var className = el.className;
jQuery(#id)
var el = $("#foo"); var className = el.className;
jQuery(.id)
var el = $(".foo2"); var className = el.className;
jQuery(tag#id)
var el = $("div#foo"); var className = el.className;
jQuery(tag.id)
var el = $("div.foo2"); var className = el.className;
jQuery + getElementById
var el = $(document.getElementById("foo")); var className = el.className;
jQuery + getElementsByClassName
var el = $(document.getElementsByClassName("foo2")); var className = el.className;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector(#id)
querySelector(.id)
querySelectorAll(tag#id)
querySelectorAll(.id)
jQuery(#id)
jQuery(.id)
jQuery(tag#id)
jQuery(tag.id)
jQuery + getElementById
jQuery + getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:64.0) Gecko/20100101 Firefox/64.0

Browser/OS: Firefox 64 on Linux

View result in a separate tab

Test name	Executions per second
getElementById()	1028632.0 Ops/sec
getElementsByClassName()	1057625.6 Ops/sec
getElementsByTagName()	1255337.1 Ops/sec
querySelector(#id)	1263273.2 Ops/sec
querySelector(.id)	1206710.5 Ops/sec
querySelectorAll(tag#id)	319226.3 Ops/sec
querySelectorAll(.id)	406968.1 Ops/sec
jQuery(#id)	1026381.4 Ops/sec
jQuery(.id)	240928.2 Ops/sec
jQuery(tag#id)	109965.4 Ops/sec
jQuery(tag.id)	118647.0 Ops/sec
jQuery + getElementById	824005.8 Ops/sec
jQuery + getElementsByClassName	305855.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark test created on MeasureThat.net, which compares the speed of different approaches to retrieve an element by its ID and class name using vanilla JavaScript and jQuery.

Specifically, the benchmark tests the following:

* Retrieving an element by its ID using `document.getElementById()`, `querySelector()` with the `[id]` selector, and `jQuery`'s `#id` selector.
* Retrieving an element by its class name using `document.getElementsByClassName()`, `querySelector()` with the `.class` selector, and `jQuery`'s `.class` selector.

**Approaches being compared**

The benchmark tests the following approaches:

* Vanilla JavaScript:
	+ `document.getElementById()`: retrieves the first matching element by its ID.
	+ `document.getElementsByClassName()`: retrieves a list of all elements with the specified class name (in this case, an empty array since there are no classes).
	+ `querySelector()` with the `[id]` selector: retrieves the first matching element by its ID using the CSS selector syntax.
* jQuery:
	+ `jQuery('#id')`: retrieves the first matching element by its ID.
	+ `jQuery('.class')`: retrieves all elements with the specified class name.
	+ `jQuery('#id') + jQuery('.class')`: combines two jQuery selectors to retrieve both an element by its ID and a list of elements by their class name.

**Results**

The benchmark results show that:

* The fastest approach for retrieving an element by its ID is using vanilla JavaScript's `querySelector()` with the `[id]` selector.
* The fastest approach for retrieving an element by its class name is using jQuery's `.class` selector (since it returns a list of all matching elements).
* Combining two selectors (e.g., `jQuery('#id') + jQuery('.class')`) is slower than using a single selector.

Note that the results may vary depending on the browser, version, and other factors.

Related benchmarks:

jQuery vs Vanilla JS GetID Speed Test 22 (version: 0)

Comparing speed of getting element by id with jQuery vs Vanilla JS

Created: 5 years ago by: Guest

Jump to the latest result

getElementById()

getElementsByClassName()

getElementsByTagName()

querySelector(#id)

querySelector(.id)

querySelectorAll(tag#id)

querySelectorAll(.id)

jQuery(#id)

jQuery(.id)

jQuery(tag#id)

jQuery(tag.id)

jQuery + getElementById

jQuery + getElementsByClassName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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