Benchmark: jQuery vs Native JS

HTML Preparation code:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
<div id="main-container">
    <ul>
        <li id="element-1" class="elements">
            <div>
                <span data-target="f-page-options-1" class="f-page-options"></span>
            </div>
        </li>
        <li id="element-2" class="elements">
            <div>
                <span data-target="f-page-options-2" class="f-page-options"></span>
            </div>
        </li>
        <li id="element-3" class="elements">
            <div>
                <span data-target="f-page-options-3" class="f-page-options"></span>
            </div>
        </li>
        <li id="element-4" class="elements">
            <div>
                <span data-target="f-page-options-4" class="f-page-options"></span>
            </div>
        </li>
        <li id="element-5" class="elements">
            <div>
                <span data-target="f-page-options-5" class="f-page-options"></span>
            </div>
        </li>
        <li id="element-6" class="elements">
            <div>
                <span data-target="f-page-options-6" class="f-page-options"></span>
            </div>
        </li>
    </ul>
</div>

Script Preparation code:

var mainContainer = document.getElementById('main-container');
var $mainContainer = $('#main-container');

Tests:

jQuery - find ~ cached.
$mainContainer.find('.f-page-options')
jQuery - find ~ without cache.
$('.f-page-options')
native - global
document.getElementsByClassName('f-page-options')
native - cached.
mainContainer.getElementsByClassName('f-page-options')
jQuery - using context.
$('.f-page-options', $mainContainer)
jQuery - using data attributes.
$('span[data-target="f-page-options-1"]')
jQuery init after using native DOM
var el = document.getElementsByClassName('f-page-options'); $(el)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery - find ~ cached.
jQuery - find ~ without cache.
native - global
native - cached.
jQuery - using context.
jQuery - using data attributes.
jQuery init after using native DOM

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

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

Browser/OS: Chrome 138 on Windows

View result in a separate tab

Test name	Executions per second
jQuery - find ~ cached.	1564849.9 Ops/sec
jQuery - find ~ without cache.	1434934.8 Ops/sec
native - global	25943236.0 Ops/sec
native - cached.	25822830.0 Ops/sec
jQuery - using context.	1126284.2 Ops/sec
jQuery - using data attributes.	688066.8 Ops/sec
jQuery init after using native DOM	1348433.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark compares the execution times of jQuery and native JavaScript for various DOM query methods.

**Query Methods Compared**

1. `find ~ cached`: jQuery finds elements by ID and caches them to improve performance.
2. `find ~ without cache`: jQuery finds elements by ID but does not cache them.
3. `global`: Native JavaScript uses the global method to find elements.
4. `cached`: Native JavaScript caches the results of previous DOM queries.
5. `using context`: Using the `$mainContainer` object as the context for the query.
6. `using data attributes`: Using data attributes to identify specific elements.

**Native JavaScript vs jQuery**

The benchmark compares native JavaScript with jQuery's DOM query methods. The main difference is how jQuery implements caching and optimization, which can lead to performance differences between the two approaches.

**Pros and Cons of Each Approach**

1. **`find ~ cached` (jQuery)**:
	* Pros: Caching improves performance for frequent queries.
	* Cons: Requires multiple DOM queries if elements are added/removed dynamically.
2. **`find ~ without cache` (jQuery)**:
	* Pros: No additional DOM queries required, suitable for dynamic content.
	* Cons: Performance might be slower due to caching overhead.
3. **`global` (Native JavaScript)**:
	* Pros: Fast and efficient, no caching needed.
	* Cons: Requires multiple DOM queries if elements are added/removed dynamically.
4. **`cached` (Native JavaScript)**:
	* Pros: Improves performance for frequent queries, reduces DOM query overhead.
	* Cons: May require more complex code to manage caching.

**Library Used**

jQuery is used as the library in this benchmark. Its purpose is to provide an easy-to-use API for manipulating the Document Object Model (DOM).

**Special JS Features or Syntax**

The benchmark uses a few special JavaScript features:

1. **`$` symbol**: jQuery's dollar sign alias, which allows using jQuery methods with a `$` prefix.
2. **`find` and `getElementsByClassName`**: Methods used to find elements in the DOM.
3. **`data-target` attribute**: Used to identify specific elements in the benchmark.

**Other Alternatives**

If you're interested in native JavaScript alternatives, consider using:

1. `querySelectorAll`
2. `querySelector`
3. `Element.prototype.querySelector`

These methods provide similar functionality to jQuery's `find` and `getElementsByClassName`, but with more flexibility and control over the DOM.

Keep in mind that native JavaScript approaches might require more code and expertise compared to jQuery, but can offer better performance and customization options for specific use cases.

Related benchmarks:

jQuery vs Native JS (version: 2)

Just checking jquery vs native js execution times

Comparing performance of: jQuery - find ~ cached. vs jQuery - find ~ without cache. vs native - global vs native - cached. vs jQuery - using context. vs jQuery - using data attributes. vs jQuery init after using native DOM

Created: 4 years ago by: Registered User

Jump to the latest result

jQuery - find ~ cached.

jQuery - find ~ without cache.

native - global

native - cached.

jQuery - using context.

jQuery - using data attributes.

jQuery init after using native DOM

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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