Benchmark: jQuery vs Native JS

jQuery vs Native JS (version: 2) Benchmark.js

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: 5 years ago by: Registered User

Go to the latest result

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)

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

native - cached.

8.3M/s

native - global

5.3M/s

jQuery - find ~ cached.

718K/s

jQuery - find ~ without cache.

646K/s

jQuery - using context.

626K/s

jQuery init after using native DOM

529K/s

jQuery - using data attributes.

473K/s

Fastest: native - cached. (17.6x faster)

View exact numbers

✓ native - cached.: 8,337,182 ops/sec
• native - global: 5,312,168 ops/sec
• jQuery - find ~ cached.: 717,598 ops/sec
• jQuery - find ~ without cache.: 645,862 ops/sec
• jQuery - using context.: 625,983 ops/sec
• jQuery init after using native DOM: 528,533 ops/sec
• jQuery - using data attributes.: 473,279 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year 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

native - global

25.9M/s

native - cached.

25.8M/s

jQuery - find ~ cached.

1.6M/s

jQuery - find ~ without cache.

1.4M/s

jQuery init after using native DOM

1.3M/s

jQuery - using context.

1.1M/s

jQuery - using data attributes.

688K/s

View exact numbers

Test name	Executions per second
✓ native - global	25,943,236 Ops/sec
native - cached.	25,822,830 Ops/sec
jQuery - find ~ cached.	1,564,850 Ops/sec
jQuery - find ~ without cache.	1,434,935 Ops/sec
jQuery init after using native DOM	1,348,433 Ops/sec
jQuery - using context.	1,126,284 Ops/sec
jQuery - using data attributes.	688,067 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.

jQuery vs Native JS (version: 2) Benchmark.js

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: 5 years ago by: Registered User

Go 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

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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`