Run results for: querySelector vs getElementsByClassName lexlexa

Run details:

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

Browser: Chrome 89

Operating system: Linux

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
querySelector	1426957.0 Ops/sec
getElementByClassName	1471316.0 Ops/sec

HTML Preparation code:

<div class="card card-slim gl-overflow-hidden">
  <div
    class="card-header gl-display-flex gl-justify-content-space-between panel-empty-heading border-bottom-0"
  >
    <h3
      class="card-title h5 position-relative gl-my-0 gl-display-flex gl-align-items-center gl-h-7"
    >
      <a
        id="user-content-related-issues"
        aria-hidden="true"
        href="#related-issues"
        class="gl-link anchor position-absolute gl-text-decoration-none"
      ></a>
      Linked issues
      <a
        aria-label="Read more about related issues"
        rel="noopener"
        target="_blank"
        href="/help/user/project/issues/related_issues"
        class="gl-link gl-display-flex gl-align-items-center gl-ml-2 gl-text-gray-500"
        ><svg
          data-testid="question-icon"
          aria-hidden="true"
          class="gl-icon s12"
          role="text"
        >
          <use
            href="/assets/icons-2fb014ce49a3e87b1e47aae4b8adfa35e6b59f49e1474a18a2518ad2285bce08.svg#question"
          ></use>
          </svg></a>
      <div class="gl-display-inline-flex">
        <div
          class="js-related-issues-header-issue-count gl-display-inline-flex gl-mx-5"
        >
          <span class="gl-display-inline-flex gl-align-items-center"
            ><svg
              data-testid="issues-icon"
              aria-hidden="true"
              class="gl-mr-2 gl-text-gray-500 gl-icon s16"
            >
              <use
                href="/assets/icons-2fb014ce49a3e87b1e47aae4b8adfa35e6b59f49e1474a18a2518ad2285bce08.svg#issues"
              ></use>
            </svg>
            0
          </span>
        </div>
        <button
          data-qa-selector="related_issues_plus_button"
          aria-label="Add a related issue"
          type="button"
          class="btn js-issue-count-badge-add-button btn-default btn-md gl-button btn-icon"
        >

          <svg
            data-testid="plus-icon"
            aria-hidden="true"
            class="gl-button-icon gl-icon s16"
          >
            <use
              href="/assets/icons-2fb014ce49a3e87b1e47aae4b8adfa35e6b59f49e1474a18a2518ad2285bce08.svg#plus"
            ></use>
          </svg>

        </button>
      </div>
    </h3>
  </div>
  <div class="linked-issues-card-body bg-gray-light">
  </div>
</div>

Tests:

querySelector
document.querySelector('.card-header').querySelector('.gl-mx-5')
getElementByClassName
document.getElementsByClassName('card-header')[0].getElementsByClassName('gl-mx-5')[0]

Run results for: querySelector vs getElementsByClassName lexlexa

querySelector

getElementByClassName