Benchmark: NativeGet vs NativeQuery vs EarthJS vs jQuery

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function v(type, selector, content) {
        const item = document.querySelectorAll(selector);

        if (type === "html") {
            for (let i = 0; i < item.length; i++) {
                item[i].innerHTML = content;
            }
        } else if(type === "addClass") {
            for (let i = 0; i < item.length; i++) {
                item[i].classList.add(content);
            }
        } else if (type === "removeClass") {
            for (let i = 0; i < item.length; i++) {
                item[i].classList.remove(content);
            }
        } else if (type === "toggleClass") {
            for (let i = 0; i < item.length; i++) {
                item[i].classList.toggle(content);
            }
        }
    }
</script>

<div class="new-page-container"><p id="superID">Hello World</p></div>

Script Preparation code:

document.querySelector(".new-page-container p").classList.remove("test");

Tests:

jQuery
$(".new-page-container p").addClass("test");
EarthJS
v("addClass", ".new-page-container p", "test");
Native Query
document.querySelector(".new-page-container p").classList.add("test");
Native Get
document.getElementById("superID").classList.add("test");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery
EarthJS
Native Query
Native Get

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:56.0) Gecko/20100101 Firefox/56.0

Browser/OS: Firefox 56 on Mac OS X 10.11

View result in a separate tab

Test name	Executions per second
jQuery	88909.0 Ops/sec
EarthJS	431609.3 Ops/sec
Native Query	685751.7 Ops/sec
Native Get	953220.1 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark measures the performance of different approaches to add a CSS class to an HTML element on a webpage. The benchmark compares four methods:

1. Native Get: uses the native JavaScript API `document.getElementById` and `classList.add`
2. Native Query: uses the native JavaScript API `document.querySelector` and `classList.add`
3. EarthJS: uses the custom `v` function defined in the script preparation code
4. jQuery: uses the popular JavaScript library jQuery

**Options Compared**

The benchmark compares the performance of each method on a webpage with a single paragraph element.

**Pros and Cons of Each Approach**

1. **Native Get (Native Query)**:
	* Pros: Fast, lightweight, and compatible with most browsers.
	* Cons: May not be as efficient as other methods, especially for complex selectors.
2. **EarthJS (Custom v function)**:
	* Pros: Can provide fine-grained control over the DOM manipulation process.
	* Cons: Custom implementation can be slower than native APIs and may require more memory.
3. **jQuery**:
	* Pros: Well-maintained, widely supported, and provides a simple way to manipulate the DOM.
	* Cons: Adds an extra library dependency, which can increase page size and load time.

**Library Description**

The `v` function in the EarthJS test case is not a standard JavaScript API. It appears to be a custom implementation of a method similar to jQuery's `.addClass()` or `.toggleClass()`. The purpose of this function is to add a CSS class to one or more elements, but its implementation is specific to the EarthJS library.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntaxes used in this benchmark. However, it's worth noting that the `querySelector` and `getElementById` methods use CSS selectors, which can be complex and slow for certain types of queries.

**Other Alternatives**

If you're looking for alternative approaches to add a CSS class to an HTML element, consider:

* Using vanilla JavaScript with `document.getElementById` or `document.querySelector`
* Utilizing other libraries like React, Angular, or Vue.js, which provide built-in DOM manipulation features
* Leveraging modern browser APIs like `Element.prototype.classList.add()` (supported in Chrome and Firefox)

In summary, the benchmark provides a comparison of different methods for adding a CSS class to an HTML element. The choice of method depends on your specific use case, performance requirements, and personal preferences regarding library dependencies.

Related benchmarks:

NativeGet vs NativeQuery vs EarthJS vs jQuery (version: 0)

comparing the 4 Titans

Comparing performance of: jQuery vs EarthJS vs Native Query vs Native Get

Created: 6 years ago by: Guest

Jump to the latest result

jQuery

EarthJS

Native Query

Native Get

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