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;

​x
 
//Add 100,000 elementsvar 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 speedvar 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()
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()

 
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()
if( $('#one').add('#two').length != 2 ) throw Error()
Select one two array
if( $([document.getElementById('one'),document.getElementById('two')]).length != 2 ) throw Error()
if( $([document.getElementById('one'),document.getElementById('two')]).length != 2 ) throw Error()

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
Original selector
Parse selector
select one two jquery add
Select one two array

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chromium 65 on Ubuntu

View result in a separate tab

Test name	Executions per second
Original selector	171.6 Ops/sec
Parse selector	93266.0 Ops/sec
select one two jquery add	80721.3 Ops/sec
Select one two array	250662.7 Ops/sec

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

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:

Individual selectors: Using the document.getElementById() method to select each element individually (e.g., document.getElementById('one')).
Parse selector: Parsing the selector string using a regular expression and then using the parsed parts to select the elements.
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

Individual selectors:
- Pros: Simple, straightforward, and well-supported by most browsers.
- Cons: Can be slow for large numbers of elements or complex selections.
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.
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.

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`.

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

Jump to the latest result

Original selector