Benchmark: querySelectorAll vs simple parse vs individual selectors

Script Preparation code:

//Add 100,000 elements
var frag = document.createDocumentFragment();
for (var i=0; i<10; i++){
  var outDiv = document.createElement('div');
  for (var j=0; j<100; j++){
    var midDiv = document.createElement('div');
    for (var k=0; k<100; k++){
      var inDiv = document.createElement('div');
      if(i==6 && j==60){
        if(k==60)
          inDiv.id="one";
        else if(k==61)
          inDiv.id="two";
      }
      midDiv.appendChild(inDiv)
    }
    outDiv.appendChild(midDiv)
  }
  frag.appendChild(outDiv);
}
document.body.appendChild(frag);

	// A simple way to check for HTML strings
	// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
	// Strict HTML recognition (#11290: must start with <)
	// Shortcut simple #id case for speed
var rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;

var selectorOne = '#one';
var selectorTwo = '#two';
var selectorBoth = selectorOne + ',' +selectorTwo;

Tests:

Original selector
var elements = document.querySelectorAll(selectorBoth); if( $(elements).length != 2 ) throw Error()
Parse selector
var selectors = selectorBoth.split(','); var ids = true; for(var i=0; i<selectors.length; i++) { var match = rquickExpr.exec( selectors[i] ); ids = ids && (selectors[i] = match[2]); } var elements = []; if(ids){ for(selector in selectors){ elements.push( document.getElementById(selector) ) } } else { elements = document.querySelectorAll(selectorBoth) throw Error("querySelectorAll"); } if( $(elements).length != 2 ) throw Error()
select one two jquery add
if( $('#one').add('#two').length != 2 ) throw Error()
Select one two array
if( $([document.getElementById('one'),document.getElementById('two')]).length != 2 ) throw Error()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Original selector
Parse selector
select one two jquery add
Select one two array

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is testing three different approaches to select two ID'd elements from the DOM:

1. **Individual selectors**: Using the `document.getElementById()` method to select each element individually (e.g., `document.getElementById('one')`).
2. **Parse selector**: Parsing the selector string using a regular expression and then using the parsed parts to select the elements.
3. **jQuery-style selector**: Using jQuery's `$()` function with the `.add()` method to combine two selectors.

**Options being compared**

The benchmark is comparing the performance of these three approaches:

* **Individual selectors**: One implementation using `document.getElementById()` for each element.
* **Parse selector**: One implementation parsing the selector string and then using the parsed parts to select the elements.
* **jQuery-style selector**: One implementation using jQuery's `$()` function with the `.add()` method.

**Pros and cons of each approach**

1. **Individual selectors**:
	* Pros: Simple, straightforward, and well-supported by most browsers.
	* Cons: Can be slow for large numbers of elements or complex selections.
2. **Parse selector**:
	* Pros: Allows for more flexible and powerful selection syntax, can be faster than individual selectors for simple cases.
	* Cons: Requires parsing the selector string, which can add overhead, especially for complex selections.
3. **jQuery-style selector**:
	* Pros: Combines the benefits of both individual selectors and parse selector approaches, provides a convenient way to chain multiple selections together.
	* Cons: Adds an additional dependency on jQuery (unless implemented without it), can be slower than individual selectors due to the overhead of the `.add()` method.

**Library and its purpose**

The benchmark uses jQuery's `$()` function with the `.add()` method, which is a convenience wrapper around `document.getElementById()`. This allows for a simple way to chain multiple selections together. However, it's essential to note that this implementation relies on jQuery, which may not be desirable in all scenarios.

**Special JS feature or syntax**

There are no special JavaScript features or syntax mentioned in the benchmark definition. The focus is on comparing different selection methods rather than exploring advanced JavaScript concepts.

**Other alternatives**

Besides the three approaches being compared, there are other methods to select elements from the DOM:

* **CSS selector**: Using a CSS selector string (e.g., `#one #two`) can also be used to select elements.
* **QuerySelector and QuerySelectorAll**: These newer Web API methods provide more powerful and flexible selection capabilities than traditional `document.getElementById()` or `querySelector`.

It's worth noting that the benchmark result shows that the "Parse selector" approach performs better than the individual selectors, while the jQuery-style selector approach is slower. However, these results may vary depending on the specific use case, browser version, and platform being tested.

Related benchmarks:

querySelectorAll vs simple parse vs individual selectors (version: 17)

Testing different ways to select a couple of ID'd elements from the DOM

Comparing performance of: Original selector vs Parse selector vs select one two jquery add vs Select one two array

Created: 9 years ago by: Registered User

Jump to the latest result

Original selector

Parse selector

select one two jquery add

Select one two array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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