Benchmark: ID vs CLASS vs ID CLASS vs CLASS > CLASS vs DATA

HTML Preparation code:

<a href=#content class="sr-only sr-only-focusable" id=skippy>
  <div class=container><span class=skiplink-text>Skip to main content</span></div>
</a> <a href=https://getbootstrap.com/ class=v4-tease>The first Bootstrap 4 beta is here!</a>
<header class="bs-docs-nav navbar navbar-static-top" id=top>
  <div class=container>
    <div class=navbar-header>
      <button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div>
    <nav class="collapse navbar-collapse" id=bs-navbar>
      <ul class="nav navbar-nav">
        <li> <a href=getting-started/>Getting started</a>
        </li>
        <li> <a href=css/>CSS</a>
        </li>
        <li> <a href=components/>Components</a>
        </li>
        <li> <a href=javascript/>JavaScript</a>
        </li>
        <li> <a href=customize/>Customize</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li>
        <li><a href=https://jobs.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Jobs")'>Jobs</a></li>
        <li><a href=http://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li>
        <li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li>
      </ul>
    </nav>
  </div>
</header>
<main class=bs-docs-masthead id=content tabindex=-1>
  <div class=container> <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
    <p class=lead>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
    <p class=lead> <a href=getting-started#download class="btn btn-outline-inverse btn-lg" onclick='ga("send","event","Jumbotron actions","Download","Download 3.3.7")'>Download Bootstrap</a> </p>
    <p class=version>Currently v3.3.7</p>
    <div id=carbonads-container>
      <div class=carbonad>
        <div id=azcarbon></div>
      </div>
    </div>
  </div>
</main>
<div class=bs-docs-featurette>
  <div class=container>
    <h2 class=bs-docs-featurette-title>Designed for everyone, everywhere</h2>
    <p class=lead>Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
    <hr class=half-rule>
    <div class=row>
      <div class=col-sm-4> <img alt="Sass and Less support" src=assets/img/sass-less.png class=img-responsive>
        <h3>Preprocessors</h3>
        <p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, <a href=../css/#less>Less</a> and <a href=../css/#sass>Sass</a>. Quickly get started with precompiled CSS or build on the source.</p>
      </div>
      <div class=col-sm-4> <img alt="Responsive across devices" src=assets/img/devices.png class=img-responsive>
        <h3>One framework, every device.</h3>
        <p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
      </div>
      <div class=col-sm-4> <img alt=Components src=assets/img/components.png class=img-responsive>
        <h3>Full of features</h3>
        <p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
      </div>
    </div>
    <hr class=half-rule>
    <p class=lead>Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p> <a href=https://github.com/twbs/bootstrap class="btn btn-outline btn-lg">View the GitHub project</a> </div>
</div>
<div class="bs-docs-featurette">
  <div class="container">
    <h2 class="bs-docs-featurette-title">Official Bootstrap Themes</h2>
    <p class="lead">
      Take Bootstrap to the next level with official premium themes. Each theme is its own toolkit featuring all of Bootstrap, brand new components and plugins, full docs, build tools, and more.
    </p>

    <p class="lead">
      <a href="https://themes.getbootstrap.com" class="btn btn-outline btn-lg">Browse themes</a>
    </p>

    <img class="img-responsive" src="assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388" style="margin-left: auto; margin-right: auto;">
  </div>
</div>
<div class=bs-docs-featurette>
  <div class=container>
    <h2 class=bs-docs-featurette-title>Built with Bootstrap</h2>
    <p class=lead>Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href=../getting-started/#examples>collection of examples</a> or by exploring some of our favorites.</p>
    <hr class=half-rule>
    <div class="row bs-docs-featured-sites">
      <div class="col-xs-6 col-sm-3">
        <a href=http://expo.getbootstrap.com/2014/10/29/lyft/ target=_blank title=Lyft> <img alt=Lyft src=assets/img/expo-lyft.jpg class=img-responsive> </a>
      </div>
      <div class="col-xs-6 col-sm-3">
        <a href=http://expo.getbootstrap.com/2014/09/30/vogue/ target=_blank title=Vogue> <img alt=Vogue src=assets/img/expo-vogue.jpg class=img-responsive> </a>
      </div>
      <div class="col-xs-6 col-sm-3">
        <a href=http://expo.getbootstrap.com/2014/03/13/riot-design/ target=_blank title="Riot Design"> <img alt="Riot Design" src=assets/img/expo-riot.jpg class=img-responsive> </a>
      </div>
      <div class="col-xs-6 col-sm-3">
        <a href=http://expo.getbootstrap.com/2014/02/12/newsweek/ target=_blank title=Newsweek> <img alt=Newsweek src=assets/img/expo-newsweek.jpg class=img-responsive> </a>
      </div>
    </div>
    <hr class=half-rule>
    <p class=lead>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p> <a href=http://expo.getbootstrap.com class="btn btn-outline btn-lg">Explore the Expo</a> </div>
</div>
<footer class=bs-docs-footer>
  <div class=container>
    <ul class=bs-docs-footer-links>
      <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li>
      <li><a href=https://twitter.com/getbootstrap>Twitter</a></li>
      <li><a href=getting-started/#examples>Examples</a></li>
      <li><a href=about/>About</a>
      </li>
    </ul>
    <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p>
    <p>Code licensed <a href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank rel=license>MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel=license>CC BY 3.0</a>.</p>
  </div>
</footer>

Tests:

ID
$('#azcarbon');
CLASS
$('.carbonad');
ID CLASS
$('#carbonads-container .carbonad');
CLASS > CLASS
$('.container > .version');
DATA
$('[data-target]');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ID
CLASS
ID CLASS
CLASS > CLASS
DATA

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2024 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.99 Safari/537.36

Browser/OS: Chrome 64 on Linux

View result in a separate tab

Test name	Executions per second
ID	1479598.0 Ops/sec
CLASS	896790.4 Ops/sec
ID CLASS	486983.9 Ops/sec
CLASS > CLASS	35667.9 Ops/sec
DATA	18423.9 Ops/sec

ID vs CLASS vs ID CLASS vs CLASS > CLASS vs DATA (version: 0)

Comparing performance of: ID vs CLASS vs ID CLASS vs CLASS > CLASS vs DATA

Created: 6 years ago by: Registered User

Jump to the latest result

ID

CLASS

ID CLASS

CLASS > CLASS

DATA

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A