(moz|webkit|ms|o)MatchesSelector vs. jQuery.is vs. Native Implementation (v19)

Revision 19 of this benchmark created by PAEz on

Description

Testing selector matching using (moz|webkit)MatchesSelector (implemented "matchesSelector" in Firefox and webkit browsers)

Preparation HTML

<div class="level1">
    <div class="level2">
        <div class="level3">
            <div class="level4">
                <div class="level5" id="foo">
                </div>
                <div class="level5">
                </div>
                <div class="level5">
                </div>
            </div>
        </div>
    </div>
</div>
<script>
a=document.querySelector('.level1 .level2 .level3 .level4 .level5');
Node.prototype._$matches = function (selector){
  var
          selector = selector.split('.')
        , tag = selector.shift().toUpperCase()
        , re = new RegExp('\\b('+selector.join('|')+')\\b', 'g')
        , el = this
      ;
      if(
             (tag === '' || el.nodeName == tag)
          && (!selector.length || ((el.className+'').match(re) || []).length == selector.length)
        ) return true;

}

if (document.body.matches){
  _matches = '_$matches';
} else if (document.body.matchesSelector){
  _matches = 'matchesSelector';
} else if (document.body.mozMatchesSelector){
  _matches = '_$matches';
} else if (document.body.webkitMatchesSelector){
  _matches = 'webkitMatchesSelector';
} else if (document.body.oMatchesSelector){
  _matches = 'oMatchesSelector';
} else if (document.body.msMatchesSelector){
  _matches = 'msMatchesSelector';
}

if (document.body.matches){
  $_matches = '_$matches';
} else if (document.body.matchesSelector){
  $_matches = 'matchesSelector';
} else if (document.body.mozMatchesSelector){
  $_matches = '_$matches';
} else if (document.body.webkitMatchesSelector){
  $_matches = 'webkitMatchesSelector';
} else if (document.body.oMatchesSelector){
  $_matches = 'oMatchesSelector';
} else if (document.body.msMatchesSelector){
  $_matches = 'msMatchesSelector';
}

$matches = document.body[_matches];



  function _closest1(el, selector, ctx){
    if( el ){
      ctx = ctx || document;
      selector = selector.split('.');

      var
          tag = selector.shift().toUpperCase()
        , re = new RegExp('\\b('+selector.join('|')+')\\b', 'g')
      ;

      do {
        if(
             (tag === '' || el.nodeName == tag)
          && (!selector.length || ((el.className+'').match(re) || []).length == selector.length)
        ){
          return  el;
        }
      }
      while( el !== ctx && (el = el.parentNode) );
    }

    return  null;
  }

  function _closest2(el, selector, ctx){
    if( el ){
      ctx = ctx || document;

      do {
        if( el[_matches](selector) ){
          return  el;
        }
      }
      while( el !== ctx && (el = el.parentNode) );
    }

    return  null;
  }

  function _closest3(el, selector, ctx){
    if( el ){
      ctx = ctx || document;

      do {
        if( $matches.call(el, selector) ){
          return  el;
        }
      }
      while( el !== ctx && (el = el.parentNode) );
    }

    return  null;
  }

  function _closest4(el, selector, ctx){
    if( el ){
      ctx = ctx || document;

      do {
        if( el[$_matches](selector) ){
          return  el;
        }
      }
      while( el !== ctx && (el = el.parentNode) );
    }

    return  null;
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Using $.fn.is
$element.is('.level1 .level2 .level3 .level4 .level5');
ready
Using matchesSelector, mozMatchesSelector, msMatchesSelector, oMatchesSelector or webkitMatchesSelector
$element.matching('.level1 .level2 .level3 .level4 .level5');
ready
Native Implementation using querySelectorAll on Parent Node
matchesSelector(domEl, '.level1 .level2 .level3 .level4 .level5');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.