jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

:jqmData vs Attribute Selector

Benchmark created by t32k on June 15, 2011

Preparation HTML

<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<div data-role="page" id="hoge">
  <div data-role="header">
    <h1>
      Page transitions
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <ol data-role="listview" data-inset="true">
      <li data-role="list-divider">
        Transitions
      </li>
      <li>
        <a href="#none" data-transition="none">None Transition</a>
      </li>
      <li>
        <a href="#slide">Slide</a>
      </li>
      <li>
        <a href="#slideup" data-transition="slideup">Slideup</a>
      </li>
      <li>
        <a href="#slidedown" data-transition="slidedown">Slidedown</a>
      </li>
      <li>
        <a href="#pop" data-transition="pop">Pop</a>
      </li>
      <li>
        <a href="#fade" data-transition="fade">Fade</a>
      </li>
      <li>
        <a href="#flip" data-transition="flip">Flip</a>
      </li>
    </ol>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>
<div data-role="page" id="none">
  <div data-role="header">
    <h1>
      None Transition
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <p>
      Hello jQM
    </p>
    <h2>
      MTG
    </h2>
    <ul>
      <li>
        hoge
      </li>
    </ul>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>
<div data-role="page" id="slide">
  <div data-role="header">
    <h1>
      Slide
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <p>
      Hello jQM
    </p>
    <h2>
      MTG
    </h2>
    <ul>
      <li>
        hoge
      </li>
    </ul>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>
<div data-role="page" id="slideup">
  <div data-role="header">
    <h1>
      Slideup
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <p>
      Hello jQM
    </p>
    <h2>
      MTG
    </h2>
    <ul>
      <li>
        hoge
      </li>
    </ul>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>
<div data-role="page" id="slidedown">
  <div data-role="header">
    <h1>
      Slidedown
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <p>
      Hello jQM
    </p>
    <h2>
      MTG
    </h2>
    <ul>
      <li>
        hoge
      </li>
    </ul>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>
<div data-role="page" id="pop">
  <div data-role="header">
    <h1>
      Pop
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <p>
      Hello jQM
    </p>
    <h2>
      MTG
    </h2>
    <ul>
      <li>
        hoge
      </li>
    </ul>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>
<div data-role="page" id="fade">
  <div data-role="header">
    <h1>
      Fade
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <p>
      Hello jQM
    </p>
    <h2>
      MTG
    </h2>
    <ul>
      <li>
        hoge
      </li>
    </ul>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>
<div data-role="page" id="flip">
  <div data-role="header">
    <h1>
      Flip
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <p>
      Hello jQM
    </p>
    <h2>
      MTG
    </h2>
    <ul>
      <li>
        hoge
      </li>
    </ul>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>

Test runner

Ready to run.

Testing in
Test		Ops/sec
:jqmData	`$(':jqmData(role=page)').css('color', 'red');`	ready
Attribute Selecotr	`$('[data-role="page"]').css('color', 'red');`	ready

Revisions

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

Revision 1: published by t32k on June 15, 2011
Revision 2: published by frequent on December 14, 2012