Benchmark: getElementsByClassName vs JQuery vs queryselectorALL

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="foo" bar="baz">Hello World</div>
<div class="foo" bar="baz">Hello World</div>
<div class="foo" bar="baz">Hello World</div>
<div class="foo" bar="baz">Hello World</div>
<div class="foo" bar="baz">Hello World</div>
<div class="foo" bar="baz">Hello World</div>
<div class="foo" bar="baz">Hello World</div>
<div class="foo" bar="baz">Hello World</div>
<div class="foo" bar="baz">Hello World</div>
<div class="foo" bar="baz">Hello World</div>

Tests:

getElementsByClassName
let attribute = document.getElementsByClassName('foo'); for (let i=0; i < attribute.length; i++) { attribute[i].onclick = function(){ console.log("Finaly!"); } };
JQuery
$('.foo').click(function(){ console.log("Finaly!"); });
document queryselectorALL
const attribute = document.querySelectorAll("#userlist"); for (let i=0; i < attribute.length; i++) { attribute.addEventListener("click", function(){ console.log("Finaly!"); }) };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementsByClassName
JQuery
document queryselectorALL

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:92.0) Gecko/20100101 Firefox/92.0

Browser/OS: Firefox 92 on Windows

View result in a separate tab

Test name	Executions per second
getElementsByClassName	142412.5 Ops/sec
JQuery	130004.5 Ops/sec
document queryselectorALL	1095447.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is crucial for developers to optimize their code and ensure good user experience. The provided benchmarking setup on MeasureThat.net allows users to compare the performance of three different approaches: `getElementsByClassName`, jQuery, and `document.querySelectorAll`.

**Overview of tested options**

*   **`getElementsByClassName`**: This method retrieves a live HTML collection of DOM elements that have a specified class name.
*   **jQuery (`$('.foo').click...`)**: This is a popular JavaScript library for DOM manipulation and event handling. The provided code uses jQuery's `click()` function to attach an event listener to all elements with the class `foo`.
*   **`document.querySelectorAll('#userlist')`**: This method returns a NodeList of all elements that match the specified CSS selector (`#userlist`).

**Pros and Cons**

*   **`getElementsByClassName`**:
    *   Pros: Widely supported, no external dependencies required.
    *   Cons: Can be slower for large datasets due to the use of `Array.prototype.forEach()` under the hood.
*   **jQuery (`$('.foo').click...`)**:
    *   Pros: Powerful and feature-rich library with a vast ecosystem, can handle complex DOM manipulation.
    *   Cons: External dependency required (the jQuery library), slower initialization time due to the overhead of loading an external resource.
*   **`document.querySelectorAll('#userlist')`**:
    *   Pros: Fast and efficient for selecting elements using CSS selectors, no external dependencies required.
    *   Cons: Not as widely supported across older browsers compared to `getElementsByClassName`, may require additional library support for older browsers.

**Library usage**

*   **jQuery**: jQuery is a popular JavaScript library that provides a way to simplify DOM manipulation and event handling. It adds various methods and functions on top of the native DOM API, making it easier to work with HTML documents.
    *   Purpose: To make complex DOM manipulation tasks simpler by providing an abstraction layer.
*   **`document.querySelectorAll('#userlist')`**: This method is part of the W3C specification (since HTML5) for selecting elements using CSS selectors. It's a native browser API, so no external library dependency is required.

**Special JS features or syntax**

There are no special JavaScript features or syntax used in these benchmarks that would be unfamiliar to most developers. The provided code uses standard JavaScript syntax and the mentioned libraries (`jQuery`).

**Other alternatives**

If `getElementsByClassName`, jQuery, and `document.querySelectorAll('#userlist')` do not meet your needs, you might want to consider alternative approaches such as:

*   **DOMTraversals**: Native browser API for traversing DOM elements using iteration techniques.
*   **CSSOM Query**: A W3C specification (since HTML5) for selecting elements using CSS selectors, which may offer better performance in some cases.

These alternatives can provide more control over the selection process but require a deeper understanding of their internal workings and limitations.

Related benchmarks:

getElementsByClassName vs JQuery vs queryselectorALL (version: 0)

Comparing performance of: getElementsByClassName vs JQuery vs document queryselectorALL

Created: 3 years ago by: Guest

Jump to the latest result

getElementsByClassName

JQuery

document queryselectorALL

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