Benchmark: Ultimate DOM Manipulation Benchmark (Element ID Selection)

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blissfuljs/1.0.6/bliss.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/umbrella/3.2.3/umbrella.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/8.0.0/cash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dom7@2.1.5/dist/dom7.min.js"></script>
<p id="test"></p>

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
   */
  K = function (a) {
    return /^f/.test(typeof a) ? /c/.test(b.readyState) ? a() : K(b).on('DOMContentLoaded', a) : new i(a)
  }

  // set ki prototype
  K[d] = i[d] = K.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');

window.S = function(s) {
    return document[{
        '#': 'getElementById',
        '.': 'getElementsByClassName',
        '@': 'getElementsByName',
        '=': 'getElementsByTagName'}[s[0]]
        || 'querySelectorAll'](s.slice(1))
};

(function(){var d=function(a,b){b=b&&b.first||b||document;if("function"==typeof a)"loading"==b.readyState?b.addEventListener("DOMContentLoaded",a):a();else{var c=Object.create(d.fn),e;if("object"==typeof a)if("length"in a)for(c.length=a.length,e=0;e<a.length;e++)c[e]=a[e];else c[0]=a,c.length=1;else if(a)if(e=a.match(/<(.+)>/))c[0]=b.createElement(e[1]),c.length=1;else{var f=b.querySelectorAll(a);c.length=f.length;for(e=0;e<f.length;e++)c[e]=f[e]}else c[0]=b.createDocumentFragment(),c.length=1;return c}};
d.fn=Object.create(Array.prototype,{first:{get:function(){return this[0]}},eq:{value:function(a){return d(this[a||0])}},on:{value:function(a,b){for(var c=0;c<this.length;c++)this[c].addEventListener(a,b);return this}},off:{value:function(a,b){for(var c=0;c<this.length;c++)this[c].removeEventListener(a,b);return this}},addClass:{value:function(a){for(var b=0;b<this.length;b++)d.fn.hasClass.call({first:this[b]},a)||(this[b].className+=" "+a);return this}},removeClass:{value:function(a){for(var b=0;b<
this.length;b++)this[b].className=this[b].className.replace(a,"");return this}},hasClass:{value:function(a){return""!=this.first.className&&(new RegExp("\\b"+a+"\\b")).test(this.first.className)}},prop:{value:function(a,b){if("undefined"==typeof b)return this.first[a];for(var c=0;c<this.length;c++)this[c][a]=b;return this}},attr:{value:function(a,b){if("undefined"==typeof b)return this.first.getAttribute(a);for(var c=0;c<this.length;c++)this[c].setAttribute(a,b);return this}},removeAttr:{value:function(a){for(var b=
0;b<this.length;b++)this[b].removeAttribute(a);return this}},val:{value:function(a){var b=this.first,c="value";switch(b.tagName){case "SELECT":c="selectedIndex";break;case "OPTION":c="selected";break;case "INPUT":if("checkbox"==b.type||"radio"==b.type)c="checked"}return this.prop(c,a)}},append:{value:function(a){a=d(a);for(var b=a.length,c=0;c<b;c++)this.first.appendChild(a[c].first||a[c]);return this}},before:{value:function(a){this.first.parentElement.insertBefore(d().append(a).first,this.first);
return this}},parent:{value:function(){return d(this.first.parentNode)}},clone:{value:function(){return d(this.first.cloneNode(!0))}},remove:{value:function(){for(var a=0;a<this.length;a++)this[a].parentNode.removeChild(this[a]);return this}},find:{value:function(a){return d(a,this.first)}},closest:{value:function(a){var b=this.first;do if(b[d.matches](a))return d(b);while(b=b.parentElement);return null}},is:{value:function(a){return d(this.filter(function(b){return b[d.matches](a)}))}},css:{value:function(a,
b){if("undefined"==typeof b)return this.first.style[a];for(var c=0;c<this.length;c++)this[c].style[a]=b;return this}},html:{value:function(a){return this.prop("innerHTML",a)}},text:{value:function(a){return this.prop("textContent",a)}}});d.miq="1.10.0";d.ajaxCallback=function(a,b,c,d){var f=new XMLHttpRequest;f.onreadystatechange=function(){var a;if(4==f.readyState)if(200==f.status){switch(d.dataType){case "xml":a=f.responseXML;break;case "json":a=JSON.parse(f.responseText);break;default:a=f.responseText}b(a)}else c&&
c("Ajax error: "+f.status)};f.open(d.method||"GET",a,!0);if(d.headers)for(var g in d.headers)f.setRequestHeader(g,d.headers[g]);f.send(d.data||"")};d.ajax=function(a,b){return new Promise(function(c,e){d.ajaxCallback(a,c,e,b)})};d.matches=["matches","webkitMatchesSelector","mozMatchesSelector","msMatchesSelector"].filter(function(a){return a in document.documentElement})[0];"function"===typeof define&&define.amd?define(function(){return d}):"object"===typeof module&&module.exports?module.exports=
d:"undefined"==typeof $&&($=d);window.miq=d})();

let p = null;


!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 ? selector(b,a) : e)
  }
  
  function selector(b,a)
  {
    return (a.indexOf(' ')>0 || a.indexOf('>')>0 || a.indexOf(':')>-1) ? b.querySelectorAll(a) : b[{
        '#': 'getElementById',
        '.': 'getElementsByClassName',
        '@': 'getElementsByName'}[a[0]]
        || 'getElementsByTagName'](a.slice(1));
  }

  /*
   * $ main function
   * a = css selector, dom object, or function
   * http://www.dustindiaz.com/smallest-domready-ever
   * returns instance or executes function on ready
   */
  K2 = function (a) {
    return /^f/.test(typeof a) ? /c/.test(b.readyState) ? a() : K2(b).on('DOMContentLoaded', a) : new i(a)
  }

  // set ki prototype
  K2[d] = i[d] = K2.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:

jQuery
p = jQuery('#test');
Zepto
p = Zepto('#test');
Blissful
p = Bliss('#test');
Umbrella
p = u('#test');
Cash
p = cash('#test');
Dom7
p = Dom7('#test');
Miq
p = miq('#test');
Ki
p = K('#test');
Salt.js
p = S('#test');
querySelector
p = document.querySelector('#test');
getElementById
p = document.getElementById('test');
querySelectorAll
p = document.querySelectorAll('#test');
window array
p = window['test'];
K2
p = K2('#test');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery
Zepto
Blissful
Umbrella
Cash
Dom7
Miq
Ki
Salt.js
querySelector
getElementById
querySelectorAll
window array
K2

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_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15

Browser/OS: Safari 13 on Mac OS X 10.15.4

View result in a separate tab

Test name	Executions per second
jQuery	1441675.0 Ops/sec
Zepto	1397114.0 Ops/sec
Blissful	1186340.0 Ops/sec
Umbrella	629602.6 Ops/sec
Cash	1254238.0 Ops/sec
Dom7	1070783.0 Ops/sec
Miq	702770.2 Ops/sec
Ki	915493.1 Ops/sec
Salt.js	1377825.0 Ops/sec
querySelector	1670890.0 Ops/sec
getElementById	2065419.0 Ops/sec
querySelectorAll	1304510.0 Ops/sec
window array	1618746.0 Ops/sec
K2	1286398.0 Ops/sec

Ultimate DOM Manipulation Benchmark (Element ID Selection) (version: 9)

Comparing performance of: jQuery vs Zepto vs Blissful vs Umbrella vs Cash vs Dom7 vs Miq vs Ki vs Salt.js vs querySelector vs getElementById vs querySelectorAll vs window array vs K2

Created: 3 years ago by: Registered User

Jump to the latest result

jQuery

Zepto

Blissful

Umbrella

Cash

Dom7

Miq

Ki

Salt.js

querySelector

getElementById

querySelectorAll

window array

K2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A