Benchmark: querySelector vs getElementById inside parent

HTML Preparation code:

<div class="cell">
            
<div class="grid-x grid-padding-x">
  <div id="size-configuration-table" class="cell small-24 large-6">
    <table class="vertical-table">
      <thead>
        <tr>
          <th class="table-title h6" colspan="2">
            Size Configuration
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th> Id </th>
          <td> 98 </td>
        </tr>

        <tr>
          <th> Categories </th>
          <td>
            <ul class="no-bullet">
                  <li>
                    <a href="/earth/categories/530">Ανδρικά Παντελόνια</a>
                  </li>
            </ul>
          </td>
        </tr>

        <tr>
          <th> Manufacturers </th>
          <td>
            <ul class="no-bullet">
                <li>
                  <a href="/earth/manufacturers/1282">Lacoste</a>
                </li>
            </ul>
          </td>
        </tr>

        <tr>
          <th> Gender </th>
          <td>
            <ul class="no-bullet">
                <li>
                  Men
                </li>
            </ul>
          </td>
        </tr>

        <tr>
          <th> Numeric system </th>
          <td> Manufacturer </td>
        </tr>

        <tr>
          <th> Target system </th>
          <td> International (S,M,L) </td>
        </tr>

        <tr>
          <th> Status </th>
          <td>
            <span class="label warning">
              Draft
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="size-chart" class="cell small-24 large-18">
    <table class="vertical-table">
      <thead>
        <tr>
          <th class="table-title h6" colspan="14">
            Size Chart
          </th>
        </tr>
        <tr>
          <th id="lala" class="text-center system">
            System
          </th>
          <th colspan="13" class="text-center sizes">
            Sizes
          </th>
        </tr>
      </thead>
      <tbody>
            <tr>
              <td>
                <b> IS </b>
              </td>
                <td> XS </td>
                <td> S </td>
                <td> S </td>
                <td> S </td>
                <td> M </td>
                <td> M </td>
                <td> L </td>
                <td> L </td>
                <td> XL </td>
                <td> XL </td>
                <td> XXL </td>
                <td> XXL </td>
                <td> XXXL </td>
            </tr>
            <tr>
              <td>
                <b> MNF </b>
              </td>
                <td> 34 </td>
                <td> 36 </td>
                <td> 36 </td>
                <td> 38 </td>
                <td> 40 </td>
                <td> 42 </td>
                <td> 44 </td>
                <td> 46 </td>
                <td> 48 </td>
                <td> 50 </td>
                <td> 52 </td>
                <td> 54 </td>
                <td> 56 </td>
            </tr>
            <tr>
              <td>
                <b> WL </b>
              </td>
                <td> 28 </td>
                <td> 28 </td>
                <td> 29 </td>
                <td> 30 </td>
                <td> 32 </td>
                <td> 33 </td>
                <td> 34 </td>
                <td> 36 </td>
                <td> 38 </td>
                <td> 40 </td>
                <td> 42 </td>
                <td> 44 </td>
                <td> 46 </td>
            </tr>
      </tbody>
    </table>
  </div>
</div>

          </div>

Script Preparation code:

const parentElement = document.getElementById('size-chart');

Tests:

QuerySelector
parentElement.querySelector('#lala');
getelementById
document.getElementById('lala')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
QuerySelector
getelementById

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: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36

Browser/OS: Chrome 81 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
QuerySelector	0.0 Ops/sec
getelementById	3401423.0 Ops/sec

querySelector vs getElementById inside parent (version: 0)

Comparing performance of: QuerySelector vs getelementById

Created: 3 years ago by: Guest

Jump to the latest result

QuerySelector

getelementById

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A