jQuery 2 vs. document.querySelector (v136)

Revision 136 of this benchmark created by Eeliya on

Description

This compares JQuery 2 and querySelector

Preparation HTML

<div id="main">
  <ul class="gallery">
    <li>
      Hello World
    </li>
    <li>
      Hello World
    </li>
    <li>
      Hello World
    </li>
    <li>
      Hello World
    </li>
    <li>
      Hello World
    </li>
    <li>
      Hello World
    </li>
  </ul>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

Setup

E = function (selector)
                                     {
                                        if (typeof (selector) === "string")
                                        {
                                           var e = /^\<(.*)\>$/igm.exec(selector);
                                           if (e)
                                           {
                                              return $(document.createElement(e[1]));
                                           }
    
                                           return $(document.querySelector(selector));
                                        }
                                        return null;
                                     };

Teardown


    var el = document.querySelector("#main ul:first-child");
    el.style.display = "list-item";

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery 2
$("#main ul:first-child");
ready
DOM
var el = $(document.querySelector("#main ul:first-child"));
ready
E
var el = E("#main ul:first-child");
ready

Revisions

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