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

Latest run results:

Run details: (Test run date: 4 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	2328005.8 Ops/sec
querySelectorAll	1088019.8 Ops/sec
salt.js $ routine	616046.4 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

The provided JSON represents a benchmark test case that measures the performance of four different methods to select elements from an HTML document:

1. `document.getElementById("test")`
2. `document.querySelector("#test")`
3. `document.querySelectorAll("#test")`
4. `$('#test');` (a custom JavaScript routine using the `ki.jsroutine` library)

**Options being compared**

The benchmark tests different methods to select elements from an HTML document, which can be categorized into three main groups:

1. **Native DOM Methods**: These are built-in methods of the Document Object Model (DOM) for selecting elements.
	* `document.getElementById("test")`: This method selects an element by its ID attribute.
	* `document.querySelector("#test")`: This method selects a single element that matches a CSS selector.
	* `document.querySelectorAll("#test")`: This method returns a collection of elements that match a CSS selector.
2. **Custom JavaScript Routine**: This is a custom implementation using the `ki.jsroutine` library, which provides a more efficient way to select elements.
3. **Library-based Implementation**: The `$()` function in the provided HTML preparation code uses a custom library called `salt.js` (not mentioned in the benchmark definition) to select elements.

**Pros and Cons of each approach**

Here's a brief summary of the pros and cons of each approach:

1. **Native DOM Methods**
	* Pros: Built-in methods, efficient, and widely supported.
	* Cons: May not be as efficient as custom implementations for specific use cases.
2. **Custom JavaScript Routine (ki.jsroutine)**
	* Pros: Optimized for performance, lightweight, and flexible.
	* Cons: Requires knowledge of the library's API and implementation details.
3. **Library-based Implementation (salt.js)**
	* Pros: Can provide a more efficient way to select elements compared to native DOM methods.
	* Cons: Requires knowledge of the library's API and may have additional dependencies.

**Other considerations**

1. **CSS Selectors**: The performance of `document.querySelector` and `document.querySelectorAll` can be influenced by the complexity and specificity of the CSS selector used.
2. **DOM Traversal**: The order in which elements are traversed using `querySelectorAll` can impact performance, especially if the DOM is large and complex.

**Library and Frameworks**

The custom JavaScript routine uses the `ki.jsroutine` library, which provides a more efficient way to select elements. However, the library's API and implementation details are not publicly disclosed in the benchmark definition, making it challenging to understand its inner workings.

If you're interested in learning more about this library or want to explore alternative approaches, I recommend checking out online resources, documentation, or searching for open-source implementations of similar libraries.

**Special JS features and syntax**

There is no mention of special JavaScript features or syntax in the benchmark definition. The test cases use standard JavaScript syntax and do not require any specific features or extensions.

Overall, the benchmark tests different methods to select elements from an HTML document, providing insights into their performance characteristics and potential use cases for web developers and JavaScript enthusiasts alike.

Related benchmarks:

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

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

Created: 4 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

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):