Benchmark: Element by ID fetching. Javascript vs selectors.

Element by ID fetching. Javascript vs selectors. (version: 17)

Fetching elements into a jquery object using different means. Multiple calls to document.getElementByID vs comma separated selector.

Comparing performance of: 1 div with javascript vs 1 div with jquery selector vs 2 divs with javascript. Add with jquery vs 2 divs with 2 jquery selectors. Add with jquery vs 2 divs with javascript. Add with array vs 2 divs with 2 jquery selectors. Add with array vs 2 divs with single jquery selector vs 1 div with jquery selector with context

Created: 9 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>

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);

Tests:

1 div with javascript
var $obj = $(document.getElementById('one')); if($obj.length!=1) throw Error("Fail")
1 div with jquery selector
var $obj = $('#one'); if($obj.length!=1) throw Error("Fail")
2 divs with javascript. Add with jquery
var $obj = $(document.getElementById('one')).add(document.getElementById('two')); if($obj.length!=2) throw Error("Fail")
2 divs with 2 jquery selectors. Add with jquery
var $obj = $('#one').add('#two'); if($obj.length!=2) throw Error("Fail")
2 divs with javascript. Add with array
var $obj = $([document.getElementById('one'),document.getElementById('two')]); if($obj.length!=2) throw Error("Fail")
2 divs with 2 jquery selectors. Add with array
var $obj = $([$('#one')[0],$('#two')[0]]); if($obj.length!=2) throw Error("Fail")
2 divs with single jquery selector
var $obj = $('#one, #two'); if($obj.length!=2) throw Error("Fail")
1 div with jquery selector with context
var $obj = $(document.body).find('#one'); if($obj.length!=1) throw Error("Fail")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1 div with javascript
1 div with jquery selector
2 divs with javascript. Add with jquery
2 divs with 2 jquery selectors. Add with jquery
2 divs with javascript. Add with array
2 divs with 2 jquery selectors. Add with array
2 divs with single jquery selector
1 div with jquery selector with context

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
1 div with javascript	931933.2 Ops/sec
1 div with jquery selector	1044035.6 Ops/sec
2 divs with javascript. Add with jquery	244003.6 Ops/sec
2 divs with 2 jquery selectors. Add with jquery	247036.5 Ops/sec
2 divs with javascript. Add with array	692793.1 Ops/sec
2 divs with 2 jquery selectors. Add with array	359648.8 Ops/sec
2 divs with single jquery selector	171.3 Ops/sec
1 div with jquery selector with context	418930.5 Ops/sec

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 definition and explain what's being tested, compared options, pros and cons of each approach, and other considerations.

**Benchmark Definition:**

The benchmark tests different ways to fetch elements into a jQuery object using JavaScript or selectors.

**Test Cases:**

There are 8 test cases, each testing a specific scenario:

1. **1 div with jQuery selector**: Tests fetching an element by its ID using the `$` function.
2. **1 div with JavaScript**: Tests fetching an element by its ID using `document.getElementById`.
3. **2 divs with JavaScript (Add)**: Tests fetching two elements, separated by a comma, using `document.getElementById`.
4. **2 divs with jQuery selectors (Add)**: Tests fetching two elements, separated by a comma, using the `$` function.
5. **2 divs with JavaScript (Add) Array**: Tests fetching two elements, separated by an array, using `document.getElementById`.
6. **2 divs with jQuery selectors (Add) Array**: Tests fetching two elements, separated by an array, using the `$` function.
7. **2 divs with single jQuery selector**: Tests fetching multiple elements by their IDs using a comma-separated string of selectors.
8. **1 div with jQuery selector (with context)**: Tests fetching an element by its ID within a specific container (in this case, `document.getElementById('container')`) using the `$` function.

**Comparing Options:**

The benchmark compares the performance of different approaches to fetch elements into a jQuery object:

* Using the `$` function
* Using `document.getElementById`
* Using arrays to separate elements in JavaScript or the `$` function

**Pros and Cons:**

Here's a brief summary of each approach:

* **Using the $ function:**
	+ Pros:
		- Simplified syntax for element selection.
		- Built-in support for various DOM manipulations (e.g., `.append()`, `.html()`)
	+ Cons:
		- May have performance overhead due to JavaScript engine parsing and caching.
		- Less control over the underlying DOM manipulation.
* **Using `document.getElementById`:**
	+ Pros:
		- More direct control over the underlying DOM manipulation.
		- Can be faster for simple element selection.
	+ Cons:
		- Requires manual handling of DOM elements (e.g., `.value`, `.style`).
		- May require more effort to handle edge cases or complex scenarios.

**Other Considerations:**

* **Caching:** The benchmark may cache the results of previous tests, which could impact performance.
* **Browser-specific behavior:** Some browsers may exhibit different behavior when executing JavaScript or DOM manipulations. The benchmark should be run on multiple browsers to ensure consistent results.
* **Performance metrics:** The benchmark measures executions per second (EPS). Other performance metrics like latency or throughput might be more relevant depending on the specific use case.

In conclusion, this benchmark provides a comprehensive comparison of different approaches to fetch elements into a jQuery object, allowing users to evaluate their performance and choose the best approach for their specific needs.

Related benchmarks: