Benchmark: Get element by class

HTML Preparation code:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
<div class="myDiv"></div>

Script Preparation code:

function getElement(selector, single, pos) {
    var el;

    // return single node
    // only runs if [single] is undefined
    if(single == undefined) el = document.getElementById(selector) || document.querySelector(selector);

    if(el == null) {
        if(single == false) {
            // return nodelist
            el = document.getElementsByClassName(selector);
            if(el.length == 0) el = document.getElementsByTagName(selector);
            if(el.length == 0) el = document.querySelectorAll(selector);
            if(el.length == 0) el = getElementsByClassName(selector);
        } else {
            // return single node from nodelist
            pos = (pos == null) ? 0 : pos;       // if arrayPos null, default to 0

            el = document.getElementsByClassName(selector)[pos] ||
                 document.getElementsByTagName(selector)[pos]   ||
                 document.querySelectorAll(selector)[pos]       ||
                 getElementsByClassName(selector)[pos];
        }
    }

    return el;
}

Tests:

vanilla js
var el = document.getElementsByClassName('myDiv')[0]; var classname = el.className;
jquery
var el = $('.myDiv')[0]; var classname = el.className;
custom
var el = getElement('myDiv'); var classname = el.className;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
vanilla js
jquery
custom

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
vanilla js	7745150.0 Ops/sec
jquery	1790880.4 Ops/sec
custom	515416.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition:**

The benchmark measures the performance of getting an element by its class name using three different approaches:

1. **Vanilla JavaScript:** `var el = document.getElementsByClassName('myDiv')[0]; var classname = el.className;`
2. **jQuery:** `var el = $('.myDiv')[0]; var classname = el.className;`
3. **Custom (using a custom function):** `var el = getElement('myDiv'); var classname = el.className;` where `getElement` is a custom function defined in the Script Preparation Code.

**Script Preparation Code:**

The custom `getElement` function is designed to handle different cases for getting an element by its class name. Here's what it does:

* If `single` is undefined, it uses `document.getElementById(selector)` or `document.querySelector(selector)` to get a single element.
* If the first method returns null, it tries different approaches in sequence:
	+ Get all elements with the specified class using `document.getElementsByClassName(selector)`.
	+ If no elements are found, try `document.getElementsByTagName(selector)` (which is not recommended for CSS classes).
	+ If still nothing, try `document.querySelectorAll(selector)` (a modern DOM method).
	+ Finally, it tries `getElementsByClassName(selector)` (an older, deprecated method).

**Pros and Cons:**

* **Vanilla JavaScript:**
	+ Pros: Lightweight, easy to understand.
	+ Cons: May not be as efficient or reliable as other methods.
* **jQuery:**
	+ Pros: Efficient, widely used, and well-documented.
	+ Cons: Requires additional library inclusion, may have overhead due to the wrapper function.
* **Custom (using getElement):**
	+ Pros: Flexible, allows for specific handling of different cases.
	+ Cons: More complex, may be harder to understand or optimize.

**Other Considerations:**

* The benchmark uses a virtual DOM (HTML) environment, which can affect the results. In a real-world scenario, you'd need to consider the browser's rendering engine and its impact on performance.
* The custom `getElement` function uses an older method (`getElementsByClassName`) which is deprecated in modern browsers. You may want to consider updating this approach.

**jQuery Library:**

In this benchmark, jQuery is used as a wrapper around the vanilla JavaScript DOM methods. This allows for a more efficient and convenient way to interact with the document. However, it also means that you need to include an additional library file (`jquery-3.1.0.min.js`) which may have some overhead.

**Special JS Feature/Syntax:**

There is no special JavaScript feature or syntax mentioned in this benchmark. The code uses standard DOM methods and jQuery wrappers.

Now, regarding the alternative approaches:

* Other alternatives for getting an element by class name include:
	+ Using `document.querySelector` with a CSS selector (e.g., `.myDiv`.
	+ Using `document.querySelectorAll` to get all elements with the specified class.
	+ Using a library like Prototype or MochiJS, which provide more advanced DOM manipulation methods.

Keep in mind that these alternatives may have different performance characteristics and usage patterns compared to the benchmarked approaches.

Related benchmarks:

Get element by class (version: 0)

Comparing performance of: vanilla js vs jquery vs custom

Created: 9 years ago by: Guest

Jump to the latest result

vanilla js

jquery

custom

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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