Benchmark: Performance universal/wildcard selector (JS vs. jQuery vs. Zepto vs. Bliss vs. UmbrellaJs)

HTML Preparation code:

<script src="https://blissfuljs.com/bliss.shy.min.js"></script>
<script src="https://zeptojs.com/zepto.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/umbrellajs"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>

<div id="container"></div>

​x
 
<script src="https://blissfuljs.com/bliss.shy.min.js"></script>
<script src="https://zeptojs.com/zepto.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/umbrellajs"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
​
<div id="container"></div>

Script Preparation code:

var i = 10000;
while (i--) {
  var el = document.createElement('div');
  el.textContent = 'Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.';
  document.getElementById('container').appendChild(el)
}

 
var i = 10000;while (i--) {  var el = document.createElement('div');  el.textContent = 'Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.';  document.getElementById('container').appendChild(el)}

Tests:

Vanilla
var container = document.getElementById('container') var test = container.querySelectorAll('*')
var container = document.getElementById('container')
var test = container.querySelectorAll('*')
jQuery
var container = jQuery('#container') var test = container.find('*')
var container = jQuery('#container')
var test = container.find('*')

Zepto

var container = Zepto('#container')
var test = container.find('*')

 
var container = Zepto('#container')var test = container.find('*')

Bliss

var container = Bliss('#container')
var test = container.querySelectorAll('*')

 
var container = Bliss('#container')var test = container.querySelectorAll('*')

Umbrella
var container = u('#container') var test = container.find('*')
var container = u('#container')
var test = container.find('*')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Vanilla
jQuery
Zepto
Bliss
Umbrella

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Linux

View result in a separate tab

Test name	Executions per second
Vanilla	7989.3 Ops/sec
jQuery	1015.3 Ops/sec
Zepto	827.5 Ops/sec
Bliss	11342.7 Ops/sec
Umbrella	7.1 Ops/sec

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

Benchmark Overview

The benchmark measures the performance of different JavaScript selectors in selecting elements from an HTML container.

Selector Options Compared

Vanilla: Using native JavaScript methods to select elements.
- Pros: Fast and lightweight, no dependencies on external libraries.
- Cons: May not work as expected for complex DOM structures or non-standard element attributes.
jQuery: Using the jQuery library's selector engine.
- Pros: Well-supported and efficient for most use cases, includes features like CSS selectors and attribute matching.
- Cons: Adds an additional dependency on the jQuery library, may have a performance overhead due to its complexity.
Zepto: A lightweight alternative to jQuery, designed for mobile and web development.
- Pros: Similar API to jQuery, fast and efficient, with fewer dependencies.
- Cons: May not support all jQuery features or be as widely adopted.
Bliss: A modern JavaScript selector engine developed by Microsoft.
- Pros: Fast and efficient, well-supported, and designed for web development.
- Cons: Still a relatively new library, may have a learning curve for some developers.
UmbrellaJs: A fast and lightweight alternative to Zepto, with a focus on performance.
- Pros: Similar API to Zepto, fast execution times, and low dependencies.
- Cons: May not support all features or be as widely adopted.

Library Descriptions

jQuery: A popular JavaScript library for web development, providing a robust set of DOM manipulation and event handling APIs.
Zepto: A lightweight alternative to jQuery, designed for mobile and web development, with a focus on speed and efficiency.
Bliss: A modern JavaScript selector engine developed by Microsoft, designed for fast and efficient element selection.
UmbrellaJs: A fast and lightweight alternative to Zepto, with a focus on performance and low dependencies.

Special JS Features

None mentioned in the provided benchmark definitions or test cases.

Other Considerations

When choosing a JavaScript selector engine, consider factors such as:

Performance: Look for libraries that provide efficient execution times and optimized algorithms.
Complexity: Choose a library that matches your development needs and skill level.
Dependencies: Consider the number of dependencies required by each library and their potential impact on project complexity.
Maintenance: Select libraries with an active community, bug fixes, and updates to ensure long-term support.

Alternatives

Other JavaScript selector engines worth considering include:

Pure CSS: Using CSS selectors directly in your HTML or JavaScript code for lightweight element selection.
Sizzle: A fast and efficient CSS selector engine developed by Microsoft.
CSS Selectors API: An emerging standard for CSS selector APIs, providing a consistent and efficient way to select elements.

Keep in mind that this list is not exhaustive, and other libraries may be suitable depending on your specific requirements and preferences.

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The benchmark measures the performance of different JavaScript selectors in selecting elements from an HTML container.

**Selector Options Compared**

1. **Vanilla**: Using native JavaScript methods to select elements.
	* Pros: Fast and lightweight, no dependencies on external libraries.
	* Cons: May not work as expected for complex DOM structures or non-standard element attributes.
2. **jQuery**: Using the jQuery library's selector engine.
	* Pros: Well-supported and efficient for most use cases, includes features like CSS selectors and attribute matching.
	* Cons: Adds an additional dependency on the jQuery library, may have a performance overhead due to its complexity.
3. **Zepto**: A lightweight alternative to jQuery, designed for mobile and web development.
	* Pros: Similar API to jQuery, fast and efficient, with fewer dependencies.
	* Cons: May not support all jQuery features or be as widely adopted.
4. **Bliss**: A modern JavaScript selector engine developed by Microsoft.
	* Pros: Fast and efficient, well-supported, and designed for web development.
	* Cons: Still a relatively new library, may have a learning curve for some developers.
5. **UmbrellaJs**: A fast and lightweight alternative to Zepto, with a focus on performance.
	* Pros: Similar API to Zepto, fast execution times, and low dependencies.
	* Cons: May not support all features or be as widely adopted.

**Library Descriptions**

1. **jQuery**: A popular JavaScript library for web development, providing a robust set of DOM manipulation and event handling APIs.
2. **Zepto**: A lightweight alternative to jQuery, designed for mobile and web development, with a focus on speed and efficiency.
3. **Bliss**: A modern JavaScript selector engine developed by Microsoft, designed for fast and efficient element selection.
4. **UmbrellaJs**: A fast and lightweight alternative to Zepto, with a focus on performance and low dependencies.

**Special JS Features**

None mentioned in the provided benchmark definitions or test cases.

**Other Considerations**

When choosing a JavaScript selector engine, consider factors such as:

* Performance: Look for libraries that provide efficient execution times and optimized algorithms.
* Complexity: Choose a library that matches your development needs and skill level.
* Dependencies: Consider the number of dependencies required by each library and their potential impact on project complexity.
* Maintenance: Select libraries with an active community, bug fixes, and updates to ensure long-term support.

**Alternatives**

Other JavaScript selector engines worth considering include:

1. **Pure CSS**: Using CSS selectors directly in your HTML or JavaScript code for lightweight element selection.
2. **Sizzle**: A fast and efficient CSS selector engine developed by Microsoft.
3. **CSS Selectors API**: An emerging standard for CSS selector APIs, providing a consistent and efficient way to select elements.

Keep in mind that this list is not exhaustive, and other libraries may be suitable depending on your specific requirements and preferences.

Related benchmarks:

Performance universal/wildcard selector (JS vs. jQuery vs. Zepto vs. Bliss vs. UmbrellaJs) (version: 5)

Comparing performance of: Vanilla vs jQuery vs Zepto vs Bliss vs Umbrella

Created: 6 years ago by: Registered User

Jump to the latest result

Vanilla

jQuery