jQuery vs querySelectorAll (v6)

Revision 6 of this benchmark created on

Preparation HTML

<!doctype html>
<html>
  
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
    </script>
  </head>
  
  <body>
    <ul id="list">
      <li>
        <ul class="sublist">
          <li>
            item1
          </li>
          <li>
            item2
          </li>
        </ul>
      </li>
      <li>
        <ul class="sublist2">
          <li>
            item1
          </li>
          <li>
            item2
          </li>
        </ul>
      </li>
      <li>
        <ul class="sublist">
          <li>
            item1
          </li>
          <li>
            item2
          </li>
        </ul>
      </li>
      <li>
        <ul class="sublist">
          <li>
            item1
          </li>
          <li>
            item2
          </li>
        </ul>
      </li>
    </ul>
  </body>

</html>

Test runner

Ready to run.

Testing in
TestOps/sec
jquery
var $obj = $(document.querySelector("#list .sublist")).append('<li>vasya</li>');
ready
querySelectorAll
document.querySelector("#list .sublist").innerHTML += '<li>vasya</li>';
ready
querySelectorAll
var $obj = $("#list .sublist").append('<li>vasya</li>');
ready

Revisions

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