Benchmark: getElementsByClassName vs querySelector vs jQuery

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="test"></div>

Tests:

getElementsByClassName
document.getElementsByClassName('test')
querySelector
document.querySelector('.test')
querySelector (attribute)
document.querySelector('[class="test"]')
querySelectorAll
document.querySelectorAll('.test')
querySelectorAll (attribute)
document.querySelectorAll('[class="test"]')
jQuery
$('.test')
jQuery (attribute)
$('[class="test"]')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementsByClassName
querySelector
querySelector (attribute)
querySelectorAll
querySelectorAll (attribute)
jQuery
jQuery (attribute)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.54 Safari/537.36

Browser/OS: Chrome 94 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getElementsByClassName	3937019.0 Ops/sec
querySelector	4201931.5 Ops/sec
querySelector (attribute)	1963689.6 Ops/sec
querySelectorAll	1816760.6 Ops/sec
querySelectorAll (attribute)	1073458.4 Ops/sec
jQuery	716839.6 Ops/sec
jQuery (attribute)	476319.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The benchmark measures the performance of three ways to select HTML elements with a specific class or attribute: `getElementsByClassName`, `querySelector` (without attribute), and `querySelectorAll` (without attribute). The benchmark also includes two jQuery-based approaches, `$` followed by either a class name or an attribute selector.

**Test Cases**

Each test case represents a single execution of one of the selection methods. Here's what's being tested in each test case:

1. `getElementsByClassName`: Tests how fast `getElementsByClassName` returns an array of elements with the specified class.
2. `querySelector`: Tests how fast `querySelector` selects a single element with the specified class or attribute.
3. `querySelector (attribute)`: Similar to `querySelector`, but uses attribute selectors instead of class names.
4. `querySelectorAll`: Tests how fast `querySelectorAll` returns an array of elements with the specified class or attribute.
5. `querySelectorAll (attribute)`: Similar to `querySelectorAll`, but uses attribute selectors instead of class names.
6. `jQuery ($)` and `$('[class="test"]')`: Test how fast jQuery's `$` function selects elements using class names and attribute selectors, respectively.

**Library and Syntax**

* `getElementsByClassName`: No specific library is used; it's a native JavaScript method.
* `querySelector` and `querySelectorAll`: These methods are part of the W3C DOM API, introduced in HTML5.
* jQuery: A popular JavaScript library that provides a simpler way to select elements. In this benchmark, jQuery is used with its `$` function.

**Special JS Features**

None of the test cases rely on any special JavaScript features or syntax beyond what's available in modern browsers. The focus is on comparing the performance of different selection methods.

**Alternatives**

If you were to run a similar benchmark using other libraries or alternatives, some options might include:

* CSS selectors: You could use CSS selector engines like Sizzle or CSSOM (CSS Selectors) to compare their performance with the native `querySelector` and `querySelectorAll` methods.
* Other HTML selection libraries like FastSelect or Select.js
* Browser-specific APIs like Chrome's `document.querySelector` or Firefox's `document.querySelectorAll`
* Alternative JavaScript frameworks that provide similar selection mechanisms, such as React or Angular

Keep in mind that each of these alternatives might have different performance characteristics, and the benchmark results would likely vary accordingly.

Related benchmarks:

getElementsByClassName vs querySelector vs jQuery (version: 0)

Comparing performance of: getElementsByClassName vs querySelector vs querySelector (attribute) vs querySelectorAll vs querySelectorAll (attribute) vs jQuery vs jQuery (attribute)

Created: 3 years ago by: Guest

Jump to the latest result

getElementsByClassName

querySelector

querySelector (attribute)

querySelectorAll

querySelectorAll (attribute)

jQuery

jQuery (attribute)

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):