Benchmark Run Result for: isOrIn alternatives

isOrIn alternatives

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

Date tested: 6 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

Test name	Executions per second
is() or contains()	598321.6 Ops/sec
== or contains()	0.0 Ops/sec
!!closest.length	325614.9 Ops/sec
== and parentNodes	2093276.0 Ops/sec

Benchmark definition (click to collapse):

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 found = body==innerOne || $.contains(body,$innerOne[0]);
!!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; } }

Open this result on MeasureThat.net

isOrIn alternatives

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

Date tested: 6 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

Benchmark definition (click to collapse):

is() or contains()

== or contains()

!!closest.length

== and parentNodes