Fastest way to select element by id (v87)

Revision 87 of this benchmark created by Alexander on

Description

Test HTML is the source of documentation page of Zurb Foundation framework

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>


    <div class="marketing off-canvas-wrap">
      <div class="inner-wrap">

 <title>Foundation: The Most Advanced Responsive Front-end Framework from ZURB</title><meta name="description" content="Foundation from ZURB is the most advanced responsive front-end framework in the world." />
 

<!-- <nav class="tab-bar show-for-small">
  <a class="off-canvas-left-toggle menu-icon ">
    <span></span>
  </a>  
</nav> -->


<nav class="top-bar docs-bar hide-for-small" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="http://foundation.zurb.com/">Foundation</a></h1>
    </li>
  </ul>

  <section class="top-bar-section">
    <ul class="right">
      <li class="divider"></li>
      <li class="has-dropdown">
        <a href="http://foundation.zurb.com/learn/features.html" class="">Learn</a>
        <ul class="dropdown">
          <li><a href="http://foundation.zurb.com/learn/features.html">Features</a></li>
          <li><a href="http://foundation.zurb.com/learn/faq.html">FAQ</a></li>
          <li><a href="http://foundation.zurb.com/earn/case-washington-post.html">Case Studies</a></li>
          <li><a href="http://foundation.zurb.com/learn/website-examples.html">Website Examples</a></li>
          <li><a href="http://foundation.zurb.com/learn/video-started-with-foundation.html">Videos</a></li>
          <li><a href="http://foundation.zurb.com/learn/training.html">Training</a></li>
          <li><a href="http://foundation.zurb.com/learn/about.html">About</a></li>
        </ul>
      </li>
      <li class="divider"></li>
      <li class="has-dropdown">
        <a href="http://foundation.zurb.com/templates.html" class="">Develop</a>
        <ul class="dropdown">
          <li><a href="http://foundation.zurb.com/templates.html">Add-ons</a></li>
          <li><a href="http://foundation.zurb.com/docs">Docs</a></li>
          <li><a href="http://foundation.zurb.com/develop/download.html">Download</a></li>
          <li><a href="http://foundation.zurb.com/develop/contribute.html">Contribute</a></li>
          <li><a href="http://foundation.zurb.com/develop/tools.html">Tools</a></li>
        </ul>
      </li>
      <li class="divider"></li>
      <li class="has-dropdown">
        <a href="http://foundation.zurb.com/support/forum.html" class="">Support</a>
        <ul class="dropdown">
          <li><a href="http://foundation.zurb.com/support/support.html">Support Channels</a></li>
          <li><a href="http://foundation.zurb.com/forum">Foundation Forum</a></li>
          <li><a href="http://foundation.zurb.com/support/images-and-badges.html">Images &amp; Badges</a></li>
        </ul>
      </li>
      <li class="divider"></li>
      <li>
        <a href="http://foundation.zurb.com/business/services.html" class="">Business</a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="http://foundation.zurb.com/docs" class="">Docs</a>
      </li>
      <li class="divider"></li>
      <li class="has-form">
        <a href="http://foundation.zurb.com/docs" class="small button">Getting Started</a>
    </ul>
  </section>
</nav>
<nav class="tab-bar show-for-small">
  <a class="left-off-canvas-toggle menu-icon">
    <span>Foundation</span>
  </a>
</nav>

<aside class="marketing-left-off-canvas-menu">

  <ul class="off-canvas-list">
    <li><label class="first">Foundation</label></li>
    <li><a href="http://foundation.zurb.com">Home</a></li>
  </ul>

  <hr>

  <ul class="off-canvas-list">
    <li><label>Setup</label></li>
    <li><a href="#css">CSS</a></li>
    <li><a href="sass.html">Sass</a></li>
    <li><a href="#rails">Rails</a></li>
    <li><a href="components/global.html">Global Styles</a></li>
    <li><a href="#upgrading">Upgrading</a></li>

    <hr>

    <li><label>Structure</label></li>
    <li><a href="#mediaQueries">Media Queries</a></li>
    <li><a href="components/grid.html">Grid</a></li>
    <li><a href="components/block_grid.html">Block Grid</a></li>
    <li><a href="components/interchange.html">Interchange Responsive Content <span class="label">JS</span></a></li>
    <li><a href="components/thumbnails.html">Thumbnails</a></li>
    <li><a href="#utilityClasses">Utility Classes</a></li>
    <li><a href="#rtl">Right-to-Left Support</a></li>

    <hr>

    <li><label>Navigation</label></li>
    <li><a href="components/offcanvas.html">Offcanvas <span class="label">JS</span></a></li>
    <li><a href="components/topbar.html">Top Bar <span class="label">JS</span></a></li>
    <li><a href="components/sidenav.html">Side Nav</a></li>
    <li><a href="components/magellan.html">Magellan Sticky Nav <span class="label">JS</span></a></li>
    <li><a href="components/subnav.html">Sub Nav</a></li>
    <li><a href="components/breadcrumbs.html">Breadcrumbs</a></li>
    <li><a href="components/pagination.html">Pagination</a></li>

    <hr>

    <li><label>Media</label></li>
    <li><a href="components/orbit.html">Orbit Slider <span class="label">JS</span></a></li>
    <li><a href="components/clearing.html">Clearing Lightbox <span class="label">JS</span></a></li>
    <li><a href="components/flex_video.html">Flex Video</a></li>

    <hr>

    <li><label>Forms</label></li>
    <li><a href="components/forms.html">Forms</a></li>
    <li><a href="components/abide.html">Abide Validation <span class="label">JS</span></a></li>

    <li><label>Buttons</label></li>
    <li><a href="components/buttons.html">Buttons</a></li>
    <li><a href="components/button_groups.html">Button Groups</a></li>
    <li><a href="components/split_buttons.html">Split Buttons <span class="label">JS</span></a></li>
    <li><a href="components/dropdown_buttons.html">Dropdown Buttons <span class="label">JS</span></a></li>

    <hr>

    <li><label>Typography</label></li>
    <li><a href="components/typography.html">Type</a></li>
    <li><a href="components/inline_lists.html">Inline Lists</a></li>
    <li><a href="components/labels.html">Labels</a></li>
    <li><a href="components/keystrokes.html">Keystrokes</a></li>

    <hr>

    <li><label>Callouts &amp; Prompts</label></li>
    <li><a href="components/reveal.html">Reveal Modal <span class="label">JS</span></a></li>
    <li><a href="components/alert_boxes.html">Alerts <span class="label">JS</span></a></li>
    <li><a href="components/panels.html">Panels</a></li>
    <li><a href="components/tooltips.html">Tooltips <span class="label">JS</span></a></li>
    <li><a href="components/joyride.html">Joyride <span class="label">JS</span></a></li>

    <hr>

    <li><label>Content</label></li>
    <li><a href="components/dropdown.html">Dropdowns <span class="label">JS</span></a></li>
    <li><a href="components/pricing_tables.html">Pricing Tables</a></li>
    <li><a href="components/progress_bars.html">Progress Bars</a></li>
    <li><a href="components/accordion.html">Accordion <span class="label">JS</span></a></li>
    <li><a href="components/tabs.html">Tabs <span class="label">JS</span></a></li>

    <hr>

    <li><label>Support</label></li>
    <li><a href="#changelog">Changelog</a></li>
    <li><a href="#compatibility">Compatibility</a></li>
    <li><a href="components/faq.html">FAQ</a></li>

    <hr>

    <li><label>Older Docs</label></li>
    <li><a href="http://foundation.zurb.com/docs/v/4.3.2/">Foundation 4</a></li>
    
    <li><a href="http://foundation.zurb.com/docs/v/3.2.5/">Foundation 3</a></li>
    <li><a href="http://foundation.zurb.com/docs/v/3.2.5/">Foundation 2</a></li>
    <li><a href="#cli">What Comes with Foundation?</a></li>

    <hr>

    <div class="zurb-links">
    <ul class="top">
      <li class="logo"><a href="http://zurb.com"></a></li>
      <li><a href="http://zurb.com/about">About</a></li>
      <li><a href="http://zurb.com/blog">Blog</a></li>
      <li><a href="http://zurb.com/contact">Contact</a></li>
    </ul>
    <ul class="pillars">
      <li>
        <a href="http://www.zurb.com/studios" class="footer-link-block services">
          <span class="title">Studios</span>
          <span>Helping startups win since '98.</span>
        </a>
      </li>
      <li>
        <a href="http://foundation.zurb.com/" class="footer-link-block foundation">
          <span class="title">Foundation</span>
          <span>World's most advanced responsive framework.</span>
        </a>
      </li>
      <li>
        <a href="http://zurb.com/apps" class="footer-link-block apps">
          <span class="title">Design Apps</span>
          <span>Tools to rapidly prototype and iterate.</span>
        </a>
      </li>
      <li>
        <a href="http://zurb.com/university" class="footer-link-block expo">
          <span class="title">University</span>
          <span>Online training for smarter product design.</span>
        </a>
      </li> 
    </ul>
</div>

  </ul>
</aside>

<a class="exit-off-canvas" href="#"></a>


        <section role="main">

          <div class="row">
            <div class="large-3 medium-4 columns">
              <div class="hide-for-small">
              <div class="sidebar">
  <h5>Foundation Documentation</h5>
  <form>
    <!--  <label>Search Documentation</label> -->
    <input tabindex="1" id="autocomplete" type="search" placeholder="Search Docs: e.g. forms">
  </form>

  <nav>
    <ul class="side-nav">
      <li class="heading">Setup</li>

      <li><a href="index.html">Getting Started</a></li>
      <li><a href="css.html">CSS</a></li>
      <li><a href="sass.html">Sass</a></li>
      <li><a href="applications.html">Applications</a></li>
      <li><a href="javascript.html">JavaScript</a></li>
      <li><a href="components/global.html">Global Styles</a></li>
      <li><a href="upgrading.html">Upgrading</a></li>

      <li class="divider"></li>
      <li class="heading">Structure</li>
      <li><a href="media-queries.html">Media Queries</a></li>
      <li><a href="components/visibility.html">Visibility</a></li>
      <li><a href="components/grid.html">Grid</a></li>
      <li><a href="components/block_grid.html">Block Grid</a></li>
      <li><a href="components/interchange.html">Interchange Responsive Content <span class="label">JS</span></a></li>
      <li><a href="components/thumbnails.html">Thumbnails</a></li>
      <li><a href="utility-classes.html">Utility Classes</a></li>
      <li><a href="components/rtl.html">Right-to-Left Support</a></li>

      <li class="divider"></li>
      <li class="heading">Navigation</li>
      <li><a href="components/offcanvas.html">Offcanvas <span class="label">JS</span></a></li>
      <li><a href="components/topbar.html">Top Bar <span class="label">JS</span></a></li>
      <li><a href="components/sidenav.html">Side Nav</a></li>
      <li><a href="components/magellan.html">Magellan Sticky Nav <span class="label">JS</span></a></li>
      <li><a href="components/subnav.html">Sub Nav</a></li>
      <li><a href="components/breadcrumbs.html">Breadcrumbs</a></li>
      <li><a href="components/pagination.html">Pagination</a></li>

      <li class="divider"></li>
      <li class="heading">Media</li>
      <li><a href="components/orbit.html">Orbit Slider <span class="label">JS</span></a></li>
      <li><a href="components/clearing.html">Clearing Lightbox <span class="label">JS</span></a></li>
      <li><a href="components/flex_video.html">Flex Video</a></li>

      <li class="divider"></li>
      <li class="heading">Forms</li>
      <li><a href="components/forms.html">Forms</a></li>
      <li><a href="components/abide.html">Abide Validation <span class="label">JS</span></a></li>

      <li class="divider"></li>
      <li class="heading">Buttons</li>
      <li><a href="components/buttons.html">Buttons</a></li>
      <li><a href="components/button_groups.html">Button Groups</a></li>
      <li><a href="components/split_buttons.html">Split Buttons <span class="label">JS</span></a></li>
      <li><a href="components/dropdown_buttons.html">Dropdown Buttons <span class="label">JS</span></a></li>

      <li class="divider"></li>
      <li class="heading">Typography</li>
      <li><a href="components/typography.html">Type</a></li>
      <li><a href="components/inline_lists.html">Inline Lists</a></li>
      <li><a href="components/labels.html">Labels</a></li>
      <li><a href="components/keystrokes.html">Keystrokes</a></li>

      <li class="divider"></li>
      <li class="heading">Callouts &amp; Prompts</li>
      <li><a href="components/reveal.html">Reveal Modal <span class="label">JS</span></a></li>
      <li><a href="components/alert_boxes.html">Alerts <span class="label">JS</span></a></li>
      <li><a href="components/panels.html">Panels</a></li>
      <li><a href="components/tooltips.html">Tooltips <span class="label">JS</span></a></li>
      <li><a href="components/joyride.html">Joyride <span class="label">JS</span></a></li>

      <li class="divider"></li>
      <li class="heading">Content</li>
      <li><a href="components/dropdown.html">Dropdowns <span class="label">JS</span></a></li>
      <li><a href="components/pricing_tables.html">Pricing Tables</a></li>
      <li><a href="components/progress_bars.html">Progress Bars</a></li>
      <li><a href="components/tables.html">Tables</a></li>
      <li><a href="components/accordion.html">Accordion <span class="label">JS</span></a></li>
      <li><a href="components/tabs.html">Tabs <span class="label">JS</span></a></li>

      <li class="divider"></li>
      <li class="heading">Support</li>

      <li><a href="changelog.html">Changelog</a></li>
      <li><a href="compatibility.html">Compatibility</a></li>

      <li class="divider"></li>
      <li class="heading">Older Docs</li>
      <li><a href="/docs/v/4.3.2/">Foundation 4</a></li>
      <li><a href="/docs/v/3.2.5/">Foundation 3</a></li>
      <li><a href="/docs/v/2.2.1/">Foundation 2</a></li>

    </ul>
  </nav>

  <a href="/develop/download.html" class="download button expand">Download Foundation</a>

  <section id="jobs">
    <h5>Get a job, nerd!</h5>
    <ul>
      <li>
        <a href="http://zurb.com/jobs/894-the-tombras-group-front-end-developer" target="_blank">
          <span class="positionTitle">Front-End Developer</span>
          <span class="location"><span class="companyName">The Tombras Group</span> in Knoxville, Tennessee</span>
        </a>
      </li>
      <li>
        <a href="http://zurb.com/jobs/895-the-tombras-group-back-end-developer" target="_blank">
          <span class="positionTitle">Back End Developer </span>
          <span class="location"><span class="companyName">The Tombras Group</span> in Knoxville, Tennessee</span>
        </a>
      </li>
      <li>
        <a href="http://zurb.com/jobs/984-booking-com-team-lead-development" target="_blank">
          <span class="positionTitle">Team Lead Development</span>
          <span class="location"><span class="companyName">Booking.com</span> in Amsterdam, the Netherlands</span>
        </a>
      </li>
    </ul>
    <a id="via" href="http://zurbjobs.com">via <span class="jobs-link">the Job Board from ZURB</span></a>
  </section>

</div>  
              </div>
            </div>
            <div class="large-9 medium-8 columns">

<h1 id="getting-started">Getting Started</h1>
<h3 class="subheader">Getting started With Foundation is easy. Whether you are a master of Sass, building a new app, or making your existing site responsive, we&#39;ve got you covered. How would you like to get started?</h3>

<hr>
<div class="row">
  <div class="medium-4 columns">
    <h3><a href="css.html">Hack on <strong>CSS</strong></a></h3>
    <p>As the simplest way to get started, the straight CSS version is perfect if you want to just start writing code or hacking on a simple, static site. We&#39;ll give you all the pieces you need, no setup required.</p>

    <p><a href="css.html" class="small secondary button">CSS Guide &rarr;</a></p>

  </div>
  <div class="medium-4 columns">
    <h3><a href="sass.html">Customize with <strong>Sass</strong></a></h3>
    <p>Want more control? Check out how to get started with Sass (SCSS) which will let you customize &hellip; well, everything. Setup is straightforward and if you haven&#39;t used Sass before, once you do, you&#39;ll never look back.</p>

    <p><a href="sass.html" class="small secondary button">Sass Guide &rarr;</a></p>

  </div>
  <div class="medium-4 columns">
    <h3><a href="applications.html">Build an <strong>App</strong></a></h3>
    <p>If you want to build or integrate with a web app, check out this guide. We&#39;ll show you how to use the Foundation gem, as well as give you other tools for working with a modern web app.</p>

    <p><a href="applications.html" class="small secondary button">App Guide &rarr;</a></p>
  </div>
</div>

<hr>
<h3 id="try-foundation-in-the-browser">Try Foundation in the Browser</h3>
<p>Want to give Foundation a quick spin? We&#39;ve set up a Codepen where you can play around with the default Foundation download &mdash; HTML, CSS and JS. Pretty swanky way to just see what Foundation has to offer.</p>
<p><a href="http://codepen.io/anon/pen/FHwGB" class="secondary button">Try Foundation on Codepen</a></p>
<hr>
<h3 id="coming-from-foundation-4-">Coming From Foundation 4?</h3>
<p>We&#39;ve put together a totally rad migration guide, so upgrading is easy peasy. <a href="upgrading.html">Migration Guide &rarr;</a></p>
<hr>
<h3 id="what-comes-with-foundation-">What Comes With Foundation?</h3>
<p>Well, most everything you need, we hope. Foundation has a ton of components and structures to help you build a responsive site without having to worry about all of your baseline, foundational (see what we did there) code. Here&#39;s a snapshot of what every version of Foundation includes:</p>
<div class="row">
  <div class="medium-6 columns">
    <h3><a href="components/grid.html"><strong>The Grid</strong></a></h3>
    <p>Our grid works on almost any device and has support for nesting, source ordering, offsets and device presentation. Frankly it&#39;s a little too easy.</p>
  </div>
  <div class="medium-6 columns">
    <h3><a href="components/offcanvas.html"><strong>Navigation</strong></a></h3>
    <p>People have to get around. Navigation styles in Foundation include a bitchin&#39; off-canvas implementation, a robust top bar, and a bunch of other navigational constructs.</p>
  </div>
</div>

<div class="row">
  <div class="medium-6 columns">
    <h3><a href="components/button.html"><strong>Buttons</strong></a></h3>
    <p>Clicking on stuff is awesome, so hook up your users with buttons to do stuff. We&#39;ve included styles for size, presentation, color and more so making a button is as easy as adding a class.</p>
  </div>
  <div class="medium-6 columns">
    <h3><a href="components/interchange.html"><strong>Plugins</strong></a></h3>
    <p>We&#39;ve included a ton of JS plugins written just for Foundation to optimize your page (Interchange), show off images (Clearing), pop up modals (Reveal) and tons more.</p>
  </div>
</div>

<h3 id="-and-so-much-more-seriously-">...and so much more. Seriously.</h3>
<p>That&#39;s just a snapshot of everything in Foundation. Check out all the components here through the docs &mdash; there are explanations, code examples, rendered examples and everything you need to build the components in Foundation with HTML, CSS, or Sass. Go forth and make awesome things.</p>


            </div>
          </div>

          
<div id="newsletter">
  <div class="row">

    <div class="medium-8 columns">
      <h5>Stay on top of what&rsquo;s happening in <a href="http://zurb.com/responsive">responsive design</a>.</h5>
      <p>Sign up to receive monthly <a href="http://zurb.com/responsive/reading">Responsive Reading</a> highlights. <a href="http://www.zurb.com/responsive/reading/2012/10">Read Last Month's Edition »</a></p>
    </div>


  <div class="medium-4 columns">
    <form method="post" action="http://zurb.com/responsive/subscribe">
      <div class="row collapse margintop-20px">
        <div class="small-8 medium-8 columns">
          <input type="text" name="email" placeholder="signup@example.com">
        </div>
        <div class="small-4 medium-4 columns">
          <input type="submit" href="#" class="postfix small button expand" value="Sign Up">
        </div>
      </div>
    </form>
  </div>

  
  </div>
</div>

<div class="zurb-footer-top bg-fblue">
  <div class="row property">
    <div class="medium-4 columns">
      <div class="property-info">
        <h3>Foundation</h3>
        <p>Foundation is made by <a href="http://zurb.com">ZURB, a product design</a> company in Campbell, California. We've put more than 15 years of experience building web products, services and websites into this framework.
        </p>
      </div>
    </div>
    
    <div class="medium-8 columns">
      <div class="row collapse">
        <div class="medium-4 columns">
          <div class="learn-links">
            <h4 class="hide-for-small">Want more?</h4>
            <ul>
              <li><a href="http://foundation.zurb.com/business/services.html">Foundation Business</a></li>
              <li><a href="http://zurb.com/responsive">Responsive</a></li>
              <li><a href="http://zurb.com/apps">Design Apps</a></li>
              <li><a href="http://foundation.zurb.com/learn/training.html">Foundation Training</a></li>
            </ul>
          </div>
      </div>
        <div class="medium-4 columns">
          <div class="support-links">
            <h4 class="hide-for-small">Talk to us</h4>
            <p>Tweet us at <br> <a href="https://twitter.com/foundationzurb">@foundationzurb</a></p>
            <p>Email us at <br> <a href="mailto:foundation@zurb.com">foundation@zurb.com</a><br> or check our <a href="../support/support.html">support page</a></p>
          </div>
        </div>
      <div class="medium-4 columns">
          <div class="connect-links">
            <h4 class="hide-for-small">Stay in touch</h4>
            <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
            <a href="http://zurb.com/news" class="small button">Stay Connected</a>
          </div>
        </div>
      </div> 
    </div>
  </div>
  <div class="row global">
    <div class="medium-3 small-6 columns">
      <a href="http://zurb.com/studios" class="footer-link-block services">
        <span class="title">Studios</span>
        <span>Helping more than 200 startups succeed since 1998.</span>
      </a>
    </div>
    <div class="medium-3 small-6 columns">
      <a href="http://foundation.zurb.com/" class="footer-link-block foundation">
        <span class="title">Foundation</span>
        <span>The most advanced front-end framework in the world.</span>
      </a>
    </div>
    <div class="medium-3 small-6 columns">
      <a href="http://zurb.com/apps" class="footer-link-block apps">
        <span class="title">Design Apps</span>
        <span>Prototype, iterate and collect feedback on your products.</span>
      </a>
    </div>
    <div class="medium-3 small-6 columns">
      <a href="http://zurb.com/university" class="footer-link-block expo">
        <span class="title">University</span>
        <span>Ideas, thoughts and design resources shared with you.</span>
      </a>
    </div>
  </div>
</div>

<div class="zurb-footer-bottom">
  <div class="row">
    <div class="medium-4 medium-4 push-8 columns">
      <ul class="home-social">
          <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
          <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
          <li><a href="/contact" class="mail"></a></li>
        </ul>
     </div>
     <div class="medium-8 medium-8 pull-4 columns">
        <a href="http://www.zurb.com" class="zurb-logo regular"></a>
        <ul class="zurb-links">
          <li><a href="http://zurb.com/about">About</a></li>
          <li><a href="http://zurb.com/blog">Blog</a></li>
          <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> &amp; Events</span></a></li>
          <li><a href="http://zurb.com/contact">Contact</a></li>
          <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
       </ul>
       <p class="copyright">&copy; 1998&dash;2013 ZURB, Inc. All rights reserved.</p>
    </div>          
  </div>
</div>
        </section>

      </div>
    </div>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
document.getElementById('getting-started')
ready
querySelector
document.querySelector('#getting-started');
ready
jQuery wrap getElementById
$(document.getElementById('getting-started'));
ready
jQuery wrap querySelector
$(document.querySelector('#getting-started'));
ready
jQuery
$('#getting-started');
ready

Revisions

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