Benchmark: isOrIn alternatives

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. Make === or parentNodes a function call. Check that alternatives return the correct answer.

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

HTML Preparation code:

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

AخA
 
<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)
var isOrIn = function isOrIn(container, contained){
  var found = false;
  if(!container || !contained){
  }else if(contained===container){
   found=true;
  } else{
    var pointer = contained;
    var parent = pointer.parentNode;

    while(parent && pointer!==container){
      if(parent === container){
          found=true;
          break;
      }
      pointer = parent;
      parent = pointer.parentNode;
    }

  }
  return found;
}

​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);var $innerOne = $(document.getElementById('one'));var $body = $(document.body)var isOrIn = function isOrIn(container, contained){  var found = false;  if(!container || !contained){  }else if(contained===container){   found=true;  } else{    var pointer = contained;    var parent = pointer.parentNode;​    while(parent && pointer!==container){      if(parent === container){          found=true;          break;      }      pointer = parent;      parent = pointer.parentNode;    }​  }  return found;}

Tests:

is() or contains()
var found = $body.is($innerOne) || $.contains($body[0],$innerOne[0]); if(!found)throw new Error('BOOM');
var found = $body.is($innerOne) || $.contains($body[0],$innerOne[0]);
if(!found)throw new Error('BOOM');
== or contains()
var body = $body[0]; var innerOne = $innerOne[0]; var found = body==innerOne || $.contains(body,innerOne); if(!found)throw new Error('BOOM');
var body = $body[0];
var innerOne = $innerOne[0];
var found = body==innerOne || $.contains(body,innerOne);
if(!found)throw new Error('BOOM');
!!closest.length
var found = !!$innerOne.closest($body).length; if(!found)throw new Error('BOOM');
var found = !!$innerOne.closest($body).length;
if(!found)throw new Error('BOOM');
== and parentNodes
var found = isOrIn($body[0],$innerOne[0]); if(!found)throw new Error('BOOM');
var found = isOrIn($body[0],$innerOne[0]);
if(!found)throw new Error('BOOM');

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
is() or contains()
== or contains()
!!closest.length
== and parentNodes

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 118 on Windows

View result in a separate tab

Test name	Executions per second
is() or contains()	2832116.5 Ops/sec
== or contains()	5409927.5 Ops/sec
!!closest.length	1617074.8 Ops/sec
== and parentNodes	7420063.0 Ops/sec

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

Let's break down the benchmark and its options.

Benchmark Description

The benchmark tests different methods for checking whether an element is or is contained within another element. The test starts with jQuery objects and uses === (strict equality) or parentNodes as function calls to check the relationship between elements.

Options Compared

The benchmark compares four different approaches:

is() method: A built-in jQuery method that checks if an element is contained within another element.
.contains() method: Another jQuery method, now deprecated in favor of includes() (more on this later), but still supported for backward compatibility.
Element equality using ===: Directly comparing two elements using the strict equality operator (===).
Using .closest() method: A jQuery method that finds the closest ancestor element containing a given element.

Pros and Cons of Each Approach

is() method:
- Pros: Fast, efficient, and widely supported.
- Cons: May not work as expected in certain scenarios, such as when using display: none or visibility: hidden.
.contains() method:
- Pros: Simple to use and well-documented.
- Cons: Now deprecated, may not work with newer browsers, and can be slower than other methods.
Element equality using ===:
- Pros: Fast and efficient, but requires careful consideration of element relationships.
- Cons: May not work as expected in certain scenarios, such as when elements are dynamically created or modified.
Using .closest() method:
- Pros: Convenient and easy to use, especially for finding the closest ancestor element.
- Cons: May be slower than other methods due to the traversal of DOM nodes.

Library and Its Purpose

The benchmark uses jQuery, a popular JavaScript library that simplifies DOM manipulation and event handling. jQuery provides various methods, including is(), .contains(), and .closest(), which are used in the benchmark to compare different approaches for checking element relationships.

Special JS Features or Syntax

None of the benchmark options use special JavaScript features or syntax beyond what's already explained.

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its options.

**Benchmark Description**

The benchmark tests different methods for checking whether an element is or is contained within another element. The test starts with jQuery objects and uses `===` (strict equality) or `parentNodes` as function calls to check the relationship between elements.

**Options Compared**

The benchmark compares four different approaches:

1. **`is()` method**: A built-in jQuery method that checks if an element is contained within another element.
2. **`.contains()` method**: Another jQuery method, now deprecated in favor of `includes()` (more on this later), but still supported for backward compatibility.
3. **Element equality using `===`**: Directly comparing two elements using the strict equality operator (`===`).
4. **Using `.closest()` method**: A jQuery method that finds the closest ancestor element containing a given element.

**Pros and Cons of Each Approach**

1. **`is()` method**:
	* Pros: Fast, efficient, and widely supported.
	* Cons: May not work as expected in certain scenarios, such as when using `display: none` or `visibility: hidden`.
2. **`.contains()` method**:
	* Pros: Simple to use and well-documented.
	* Cons: Now deprecated, may not work with newer browsers, and can be slower than other methods.
3. **Element equality using `===`**:
	* Pros: Fast and efficient, but requires careful consideration of element relationships.
	* Cons: May not work as expected in certain scenarios, such as when elements are dynamically created or modified.
4. **Using `.closest()` method**:
	* Pros: Convenient and easy to use, especially for finding the closest ancestor element.
	* Cons: May be slower than other methods due to the traversal of DOM nodes.

**Library and Its Purpose**

The benchmark uses jQuery, a popular JavaScript library that simplifies DOM manipulation and event handling. jQuery provides various methods, including `is()`, `.contains()`, and `.closest()`, which are used in the benchmark to compare different approaches for checking element relationships.

**Special JS Features or Syntax**

None of the benchmark options use special JavaScript features or syntax beyond what's already explained.

Related benchmarks: