YUI v3.4.1 vs. jQuery v1.7.4 DOM queries

JavaScript performance comparison

Revision 32 of this test case created

Preparation code

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js">
</script>
<script src="http://code.jquery.com/jquery-1.7.min.js">
</script>
<div id="test">
  <div class="testlink">
    <a href="#" id="linkone" title="test">test link</a>
  </div>
  <div class="testmenu">
    <ul>
      <li class="menuitem itemone">
        <a href="#" title="item 1">menu item 1</a>
      </li>
      <li class="menuitem itemtwo">
        <a href="#" title="item 2">menu item 2</a>
      </li>
      <li class="menuitem itemthree">
        not clickable item 3
      </li>
    </ul>
  </div>
</div>
<script>
  var selectors = ['body', 'div', 'body div', 'div a', 'div > a', 'div[class^=test]', 'div, li, a', '.menuitem', 'li.menuitem', '#linkone', 'div#test', 'a[title*=item]', 'a[title=test]', 'li:nth-child(even)', 'li:nth-child(odd)', 'li:last-child', 'li:first-child'];
  var Y_Instance = YUI();
  Y_Instance.use('node');
</script>

Preparation code output

test link

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery v1.7
 
for (var sel in selectors) {
  $(sel);
}
 pending…
YUI v3.4.1
 
for (var sel in selectors) {
  Y_Instance.one(sel);
}
 pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

1 comment

Ben Cochran commented : ∞

Hey, found this as part of a Moodle discussion. This (prior to Revision 32) is a TERRIBLE test. The YUI object instantiation and use() call are far and away the most expensive part of any YUI execution block, since it includes config parsing, dependency calculation, and library loading; of COURSE executing them over and over will take more time.

Creating a single instance of YUI will save a chunk of time and should be standard practice for anyone building a modular site of serious size; consolidating use() blocks drops the time much further. There can be a serious conversation about selector times based on that, but including YUI().use(...) as part of your repeated execution block is just going to create a legitimate comparison.

Add a comment