Benchmark: jQuery data vs class - v2

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<a href="#" class="dz-class" data-plugin="dz-plugin" data-plugin-dz>My link</a>
<form>
<input type="text" class="dz-class" data-plugin="dz-plugin" value="My input text" data-plugin-dz>

Tests:

Class
$elements = $('.dz-class');
Data by value
$elements = $('[data-plugin="dz-plugin"]');
Data directly
$elements = $('[data-plugin-dz]');
Class + Data by value
$elements = $('.dz-class[data-plugin="dz-plugin"]');
Class + Data directly
$elements = $('.dz-class[data-plugin-dz]');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Class
Data by value
Data directly
Class + Data by value
Class + Data directly

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 81 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
Class	180880.4 Ops/sec
Data by value	122770.4 Ops/sec
Data directly	120482.2 Ops/sec
Class + Data by value	128670.2 Ops/sec
Class + Data directly	133866.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark compares different ways to select elements using jQuery selectors in a specific HTML structure. The goal is to determine which approach is the fastest.

**Selectors Compared**

The benchmark defines four different selectors:

1. `.dz-class`: Selects elements with class `dz-class`.
2. `[data-plugin="dz-plugin"]`: Selects elements with attribute `data-plugin` having value `dz-plugin`.
3. `[data-plugin-dz]`: Selects elements with attribute `data-plugin-dz`.
4. `.dz-class[data-plugin="dz-plugin"]`: Combines classes and data attributes.

**Library Used**

The benchmark uses jQuery, a popular JavaScript library for DOM manipulation and event handling. In this case, it's used to execute the selectors on the HTML structure defined in the "Html Preparation Code".

**Special JS Feature/Syntax**

None of the selected approaches utilize any special JavaScript features or syntax beyond standard CSS selectors.

**Pros and Cons of Each Approach**

1. `.dz-class`: This approach selects elements by class name, which can be slower than other methods because it requires parsing the entire class list.
	* Pros: Easy to read and maintain, well-supported in modern browsers.
	* Cons: Can be slower due to class list parsing.
2. `[data-plugin="dz-plugin"]` and `[data-plugin-dz]`: These approaches select elements by attribute, which can be faster because it only requires checking a single attribute.
	* Pros: Faster than class-based selectors, less resource-intensive.
	* Cons: Requires specific attributes in the HTML structure, might not work with older browsers that don't support them.
3. `.dz-class[data-plugin="dz-plugin"]`: This approach combines classes and data attributes, which can be faster than individual class or attribute selection because it reduces the number of elements to check.
	* Pros: Can be faster due to reduced element count, still easy to read and maintain.
	* Cons: Requires specific class and attribute combinations in the HTML structure.

**Other Alternatives**

If you had more control over the HTML structure, you could also consider using other selectors like:

1. `:has()` for combining multiple selectors or attributes.
2. `[selector1][selector2]` for combined selections.
3. `^=selector` and `$=selector` for attribute-based selections.

However, these alternatives might require specific browser support or HTML structure modifications.

In conclusion, the benchmark highlights the importance of considering attribute-based selection when working with modern web applications, especially those using jQuery or other libraries that rely on attribute selectors.

Related benchmarks:

jQuery data vs class - v2 (version: 1)

Comparing performance of: Class vs Data by value vs Data directly vs Class + Data by value vs Class + Data directly

Created: 4 years ago by: Registered User

Jump to the latest result

Class

Data by value

Data directly

Class + Data by value

Class + Data directly

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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