Benchmark: getElementById, querySelector, querySelectorAll, and ki.jsroutine

HTML Preparation code:

<div id="test">Test</div>

Script Preparation code:

!function (b, c, d, e) {

  /*
   * init function (internal use)
   * a = selector, dom element or function
   */
  function i(a) {
    c.push.apply(this, a && a.nodeType ? [a] : '' + a === a ? b.querySelectorAll(a) : e)
  }

  /*
   * $ main function
   * a = css selector, dom object, or function
   * http://www.dustindiaz.com/smallest-domready-ever
   * returns instance or executes function on ready
   */
  $ = function (a) {
    return /^f/.test(typeof a) ? /c/.test(b.readyState) ? a() : $(b).on('DOMContentLoaded', a) : new i(a)
  }

  // set ki prototype
  $[d] = i[d] = $.fn = i.fn = {

    // default length
    length: 0,

    /*
     * on method
     * a = string event type i.e 'click'
     * b = function
     * return this
     */
    on: function (a, b) {
      return this.each(function (c) {
        c.addEventListener(a, b)
      })
    },

    /*
     * off method
     * a = string event type i.e 'click'
     * b = function
     * return this
     */
    off: function (a, b) {
      return this.each(function (c) {
        c.removeEventListener(a, b)
      })
    },

    /*
     * each method
     * use native forEach to iterate collection
     * a = the function to call on each iteration
     * b = the this value for that function
     */
    each: function (a, b) {
      c.forEach.call(this, a, b)
      return this
    },

    // for some reason is needed to get an array-like
    // representation instead of an object
    splice: c.splice
  }
}(document, [], 'prototype');

Tests:

getElementById
document.getElementById("test");
querySelector
document.querySelector("#test")
querySelectorAll
document.querySelectorAll("#test")
salt.js $ routine
$('#test');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById
querySelector
querySelectorAll
salt.js $ routine

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_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36

Browser/OS: Chrome 83 on Mac OS X 10.15.5

View result in a separate tab

Test name	Executions per second
getElementById	2946803.0 Ops/sec
querySelector	2328006.0 Ops/sec
querySelectorAll	1088020.0 Ops/sec
salt.js $ routine	616046.4 Ops/sec

getElementById, querySelector, querySelectorAll, and ki.jsroutine (version: 0)

Comparing performance of: getElementById vs querySelector vs querySelectorAll vs salt.js $ routine

Created: 3 years ago by: Guest

Jump to the latest result

getElementById

querySelector

querySelectorAll

salt.js $ routine

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A