Run results for: matches vs selector

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:53.0) Gecko/20100101 Firefox/53.0

Browser: Firefox 53

Operating system: Windows

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
matches nested 4	1777817.5 Ops/sec
selector nested 1	2648288.8 Ops/sec
matches nested 1	4545851.0 Ops/sec
selector nested 4	2404760.2 Ops/sec

HTML Preparation code:

<div id="parenter">
  <div class="parent level_one">
    <div class="child" id="child_first">child 1</div>
  </div>
  <div class="parent level_nested">
   <div class="lev1" id="child1">
     <div class="lev2" id="child2">
       <div class="lev3" id="child3">
         <div class="lev4" id="child4">child 4</div>
       </div>
     </div>
    </div>
  </div>
</div>

Script Preparation code:

uidc = 0;
function getUid (el) {
	var id = el.id;
	if(!id) {
  	id = "uid_"+ (++uidc);
  	el.id = id;
  }
	return id;
}
var target1 = document.querySelector("#child1");
var target4 = document.querySelector("#child4");
var parent = document.querySelector("#parenter");
function matchSel (target, selector, parent) {
  while(target && target !== parent){
    if(target.matches(selector)){
      return;
    }else{
      target = target.parentNode;
    }
  }
}

Tests:

matches nested 4
matchSel (target4, ".parent", parent);
selector nested 1
parent.querySelector(".parent #"+target1.id);
matches nested 1
matchSel (target1, ".parent", parent);
selector nested 4
parent.querySelector(".parent #"+target4.id);

Run results for: matches vs selector

For nested elements, better to use queryselector, for 2 level parents matches.

matches nested 4

selector nested 1

matches nested 1

selector nested 4