qsa.matchesSelector vs. jQuery.is, disable native Selectors (v17)

Revision 17 of this benchmark created on

Description

Testing selector matching on library "jQuery" vs "QSA Selector Engine"

Preparation HTML

<script type="text/javascript">
  // disable native qSA
  if (document.querySelectorAll) {
    document.querySelectorAll = null;
  }
  if (window.Element && window.Element.prototype) {
    window.Element.prototype.querySelectorAll = null;
  }
  if (window.Document && window.Document.prototype) {
    window.Document.prototype.querySelectorAll = null;
  }

  // disable native matchesSelector on HTML Element
  var docEl = document.documentElement;
  docEl.matchesSelector = docEl.oMatchesSelector = docEl.mozMatchesSelector = docEl.webkitMatchesSelector = docEl.msMatchesSelector = null;
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="https://raw.github.com/devote/QSA/master/qsa.js">
</script>
<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>
  var $element = jQuery(jQuery('.level1 .level2 .level3 .level4 .level5')[0]); // Get first result and add wrap with jQuery object
  var domEl = $element[0];
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Using $.fn.is
$element.css("background-color", "red").css("border", "1px solid blue")
ready
Using QSA matchesSelector
$element.css({'background-color': 'red', 'border': '1px solid blue'})
ready

Revisions

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