Benchmark: isOrIn alternatives

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);
var $innerOne = $(document.getElementById('one'));
var $body = $(document.body)

Tests:

is() or contains()
var found = $body.is($innerOne) || $.contains($body[0],$innerOne[0]);
== or contains()
var body = $body[0]; var innerOne = $innerOne[0]; var found = body==innerOne || $.contains(body,innerOne);
!!closest.length
var found = !!$innerOne.closest($body).length;
== and parentNodes
var found = false; var container = $body[0]; var contained = $innerOne[0]; if(contained===container){ found=true; } else if(container && contained){ var pointer = contained; var parent = pointer.parentNode; while(parent && pointer!==container){ if(parent === container){ found=true; break; } pointer = parent; parent = pointer.parentNode; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
is() or contains()
== or contains()
!!closest.length
== and parentNodes

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

The provided JSON represents a benchmark test case on MeasureThat.net, which measures the performance of different methods for checking whether an element is or contains another element. The test creates a large HTML fragment with nested div elements and uses jQuery to manipulate them.

**Benchmark Definition**

The test has four individual test cases:

1. **is() or contains()**: Tests two methods:
	* `var found = $body.is($innerOne) || $.contains($body[0],$innerOne[0]);`
	* This method checks if `$body` is an instance of the same class as `$innerOne`, and also uses a global function `.contains()` to check if `$innerOne[0]` is contained within `$body[0]`.
2. **== or contains()**: Tests two methods:
	* `var body = $body[0]; \r\nvar innerOne = $innerOne[0]; \r\nvar found = body==innerOne || $.contains(body,innerOne);`
	* This method checks if `$body[0]` is equal to `$innerOne[0]`, and also uses a global function `.contains()` to check if `$innerOne[0]` is contained within `$body[0]`.
3. **!!closest.length**: Tests the performance of checking if an element has a closest ancestor that matches a certain selector.
	* `var found = !!$innerOne.closest($body).length;`
4. **== and parentNodes**: Tests two methods:
	* `var found = false;\r\nvar container = $body[0];\r\nvar contained = $innerOne[0];\r\nif(contained===container){\r\n found=true;\r\n} else if(container && contained){\r\n  var pointer = contained;\r\n  var parent = pointer.parentNode;\r\n  \r\n  while(parent && pointer!==container){\r\n\tif(parent === container){\r\n\t\tfound=true;\r\n      \tbreak;\r\n    }\r\n    pointer = parent;\r\n    parent = pointer.parentNode;\r\n  }\r\n      \r\n}`
	* This method checks if `$contained` is the same instance as `$container`, and then uses a loop to find the closest ancestor that matches `$container`.

**Options Compared**

The test compares four different approaches:

1. **is() or contains()**: Uses jQuery's `is()` function and global `.contains()` function.
2. **== or contains()**: Uses direct equality comparison (`==`) and global `.contains()` function.
3. **!!closest.length**: Checks if an element has a closest ancestor that matches a certain selector using the `closest()` method.
4. **== and parentNodes**: Uses a loop to find the closest ancestor that matches a certain selector.

**Pros and Cons**

Here's a brief summary of each approach:

1. **is() or contains()**:
	* Pros: Fast, efficient, and easy to read.
	* Cons: Requires jQuery library and global `.contains()` function.
2. **== or contains()**:
	* Pros: Simple, straightforward, and no external dependencies.
	* Cons: Slow due to direct equality comparison and potential issues with null/undefined values.
3. **!!closest.length**:
	* Pros: Fast, efficient, and doesn't require explicit loops.
	* Cons: May not work as expected if the closest ancestor is not found.
4. **== and parentNodes**:
	* Pros: Detailed information about the ancestor chain.
	* Cons: Slow due to the use of a loop and potential issues with null/undefined values.

**Other Considerations**

When working with HTML fragments, consider the following:

* Use `document.createDocumentFragment()` instead of `document.createElement('div')` for performance reasons.
* Avoid using complex CSS selectors in close proximity to each other.
* Keep in mind that some browsers may not support certain DOM methods or properties.

By understanding these considerations and testing different approaches, you can make informed decisions about which method to use for your specific use case.

Latest run results:

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

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

Browser/OS: Chrome 60 on Windows

View result in a separate tab

Test name	Executions per second
is() or contains()	603026.6 Ops/sec
== or contains()	1184965.4 Ops/sec
!!closest.length	296822.9 Ops/sec
== and parentNodes	2168226.8 Ops/sec

Related benchmarks:

isOrIn alternatives (version: 0)

Testing different methods of checking whether an element is or is in another element. Start from the position where you have jquery objects.

Comparing performance of: is() or contains() vs == or contains() vs !!closest.length vs == and parentNodes

Created: 7 years ago by: Guest

Jump to the latest result

is() or contains()

== or contains()

!!closest.length

== and parentNodes

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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