jQuery CSS3 Not vs. .Not() (v44)

Revision 44 of this benchmark created by HP on

Preparation HTML

<div id="container">
      <div>Div</div>
      <div>Div</div>
      <div class="test">Div</div>
      <div>Div</div>
      <div>Div</div>
      <div class="test">Div</div>
      <div>Div</div>
      <div>Div</div>
      <div class="test" id="header"> Header </div>
      <div>Div</div>
      <div>Div</div>
      <div>Div</div>
      <div>Div</div>
      <div class="test">Div</div>
      <div>Div</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script></script>

Test runner

Ready to run.

Testing in
TestOps/sec
CSS3 Selector
var d = $('div#container > div');

var len = d.filter('.test:not(#header)').length;
ready
Not() then filter()
var d = $('div#container > div');

var len = d.not('#header').filter('.test').length;
ready
filter() then not()
var d = $('div#container > div');

var len = d.filter('.test').not('#header').length;
ready
CSS3 Selector (:not)
var d = $('div#container > div');

var len = d.filter(':not(.test):not(#header)').length;
ready
Filter selector (not)
var d = $('div#container > div');

var len = d.not('.test').not('#header').length;
ready
HTML DOM
var len = document.querySelectorAll("div#container > div:not(.test):not(#header)").length;
ready

Revisions

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