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. Try with a container selector rather than element (the main advantage() of closest())

Comparing performance of: !!closest.length vs == and parentNodes vs !!closest.length selector vs == and parentNodes selector

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>

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(typeof container === 'string'){
    if(!container || !contained){
    }else if($(contained).is(container)){
     found=true;
    } else{
      var pointer = contained;
      var parent = pointer.parentNode;

      while(parent && !$(pointer).is(container)){
        if($(parent).is(container)){
            found=true;
            break;
        }
        pointer = parent;
        parent = pointer.parentNode;
      }

    }
  }else{
    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:

!!closest.length
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');
!!closest.length selector
var found = !!$innerOne.closest('body').length; if(!found)throw new Error('BOOM');
== and parentNodes selector
var found = isOrIn('body',$innerOne[0]); if(!found)throw new Error('BOOM');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
!!closest.length
== and parentNodes
!!closest.length selector
== and parentNodes selector

Fastest: N/A

Slowest: N/A

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
!!closest.length	666465.9 Ops/sec
== and parentNodes	3090106.0 Ops/sec
!!closest.length selector	345803.7 Ops/sec
== and parentNodes selector	108277.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark measures the performance of different methods for checking whether an element is or contains another element in a DOM tree. The test starts with a large document fragment containing multiple levels of nested elements and then uses jQuery objects to navigate through it.

The three main methods being tested are:

1. `!!closest.length`: This method uses the `closest()` function provided by jQuery to find the closest ancestor that matches the specified container selector.
2. `isOrIn(container, contained)`: This is a custom function developed for this benchmark, which checks whether the `contained` element is directly an ancestor or descendant of the `container` element in the DOM tree.
3. `!!closest('body').length`: This method uses the `closest()` function with a specific selector to find the closest ancestor that matches the 'body' container.

**Options Compared**

The benchmark compares the performance of these three methods:

* `!!closest.length` vs `isOrIn(container, contained)`: This test measures the difference in performance between using the custom `isOrIn` function and the built-in `closest()` function.
* `!!closest.length` vs `!!closest('body').length`: This test compares the performance of using a specific selector with the generic `closest()` function.

**Pros and Cons**

1. `!!closest.length`:
	* Pros: Highly optimized and efficient, widely supported by most browsers.
	* Cons: May not work correctly for all selectors or edge cases.
2. `isOrIn(container, contained)`:
	* Pros: Customizable, can handle more complex ancestor relationships.
	* Cons: May be slower due to the custom implementation, requires additional memory allocation.
3. `!!closest('body').length`:
	* Pros: Similar performance to the generic `closest()` function, easy to use with specific selectors.
	* Cons: Less flexible than the custom `isOrIn` function, may not work correctly for all selectors.

**Library and Special Features**

The benchmark uses jQuery as a library. The `closest()` function is part of this library. The test also uses some special JavaScript features like closures (in the `isOrIn` function) and the `!!` operator for boolean checking.

**Other Alternatives**

For similar benchmarks, you can consider using other testing frameworks or libraries, such as:

* Benchmark.js: A high-performance benchmarking framework specifically designed for measuring JavaScript performance.
* Microbenchmark.net: Another popular platform for running JavaScript microbenchmarks.
* V8 Benchmark Suite: A collection of benchmarks and tests for the Google V8 engine, used in Chrome.

Keep in mind that each platform has its own strengths and weaknesses, so you may want to consider using multiple tools to get a comprehensive view of your code's performance.

Related benchmarks:

isOrIn alternatives (version: 0)

Comparing performance of: !!closest.length vs == and parentNodes vs !!closest.length selector vs == and parentNodes selector

Created: 7 years ago by: Guest

Jump to the latest result

!!closest.length

== and parentNodes

!!closest.length selector

== and parentNodes selector

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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