Document Methods Test (v4)

Revision 4 of this benchmark created on

Description

Is querySelector faster than getElementById when called from a specific context?

Preparation HTML

<div id="app">
  <div class="grid">
    <main id="main" role="main">
      <article id="text" aria-labelledby="text-h2">
        <header>
          <h2 id="text-h2">Text semantics</h2>
        </header>

        <section>
          <p>Inline text: <b>bold</b>, <strong>strong</strong>, <i>italic</i>, <em>emphasis</em>, <mark>mark</mark>, <s>no longer accurate</s>, <u>annotation</u>, <small>fine print</small>, H<sub>2</sub>O, E = mc<sup>2</sup>, <cite>Citation</cite>, <dfn id="def-api">API</dfn>, <abbr title="World Health Organization">WHO</abbr>, bidi: <bdi>User‑42</bdi>, override: <bdo dir="rtl">abc</bdo>, <time datetime="2025-08-21">today</time>, <data value="42">forty‑two</data>, <wbr> soft<wbr>word<wbr>breaks.</p>
          <p>Code & friends: <code>&lt;div&gt;</code>, <kbd>Ctrl</kbd>+<kbd>S</kbd>, <samp>output</samp>, <var>x</var>.</p>
          <p>Quotes: <q cite="https://example.com/quote">Inline quote</q> and block:</p>
          <blockquote cite="https://example.com/source"><p>Block quotation text…</p></blockquote>
          <p>Edits: <ins datetime="2025-01-01" cite="/changelog#1">inserted</ins> / <del datetime="2024-12-31" cite="/changelog#0">deleted</del>.</p>
          <pre>
&lt;pre&gt; keeps whitespace
  and shows    code blocks.
          </pre>
        </section>

        <section>
          <h3>Lists</h3>
          <ul>
            <li>Unordered item</li>
            <li>Another item</li>
          </ul>
          <ol start="3" reversed type="1">
            <li value="3">Ordered item</li>
            <li>Next</li>
          </ol>
          <dl>
            <dt>Term</dt>
            <dd>Description one</dd>
            <dt>Another term</dt>
            <dd>Description two</dd>
          </dl>
        </section>

        <section id="semantics" aria-label="Grouping">
          <h3>Grouping/Sectioning</h3>
          <div id="div-example" class="box" title="div with globals" draggable="true" contenteditable="true" spellcheck="true" inert>
            <p>This <code>div</code> demonstrates global attributes (id, class, title, draggable, contenteditable, spellcheck, inert, data-*, aria-*).</p>
          </div>
          <aside role="complementary" aria-labelledby="aside-h4">
            <h4 id="aside-h4">Aside</h4>
            <p>Supporting content.</p>
          </aside>
          <section>
            <h4>Figure</h4>
            <figure>
              <img id="logo" alt="Transparent pixel" width="32" height="32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" decoding="async" loading="lazy" referrerpolicy="no-referrer" fetchpriority="low">
              <figcaption>1×1 GIF using <code>&lt;img&gt;</code> attributes (<code>alt</code>, <code>width/height</code>, <code>decoding</code>, <code>loading</code>, <code>referrerpolicy</code>, <code>fetchpriority</code>).</figcaption>
            </figure>
          </section>

          <section>
            <h4>Picture / Source</h4>
            <picture>
              <source type="image/avif" srcset="/img/sample.avif 1x, /img/sample@2x.avif 2x" media="(min-width: 600px)">
              <source type="image/webp" srcset="/img/sample.webp 1x, /img/sample@2x.webp 2x">
              <img src="/img/sample.jpg" alt="Responsive example" sizes="(min-width: 600px) 600px, 100vw" srcset="/img/sample.jpg 1x, /img/sample@2x.jpg 2x" width="600" height="400">
            </picture>
          </section>

          <section>
            <h4>Map / Area</h4>
            <img src="/img/planet.jpg" alt="Planet map" usemap="#planet-map" width="320" height="160">
            <map name="planet-map" id="planet-map">
              <area shape="rect" coords="0,0,160,160" href="#north" alt="North" target="_self">
              <area shape="circle" coords="240,80,40" href="#south" alt="South" rel="noopener">
            </map>
          </section>

          <section>
            <h4>Ruby / RT / RP</h4>
            <p>
              <ruby>漢<rt>kan</rt><rp>(</rp><rt>ji</rt><rp>)</rp></ruby>
            </p>
          </section>
        </section>
      </article>
    </main>
  </div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
Query Selector
const semantics = document.getElementById( 'semantics' );
const logo = semantics.querySelector( '#logo' );
ready
Get by ID
const semantics = document.getElementById( 'semantics' );
const logo = document.getElementById( 'logo' );
ready

Revisions

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