Benchmark: Ultimate DOM Manipulation Benchmark (NodeList.setAttribute)

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})();


!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)
  }
  
  function selector(b,a)
  {
    return ( a.indexOf(' ')>0 || a.indexOf('>')>0 || a.indexOf(':')>-1 || a.indexOf('[')>-1 ) ? b.querySelectorAll(a) : b[{
        '#': 'getElementById',
        '.': 'getElementsByClassName'}[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 (typeof a).indexOf('f')===0 ? (b.readyState).indexOf('c')>-1 ? 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');

for (let x=0;x<1000;x++)
{
  var p = document.createElement('p');
  p.innerHTML = 'Measure That!';
  p.classList.add('blogVisible');
  p.id='x-'+String(x);
  document.body.appendChild(p);
}

Tests:

jQuery
jQuery('p').attr('x','Okay');
Zepto
Zepto('p').attr('x','Okay');
Blissful
Bliss.$('p')._.attributes({x:'Okay'});
Umbrella
u('p').attr('x','Okay');
Cash
cash('p').attr('x','Okay');
Dom7
Dom7('p').attr('x','Okay');
Miq
miq('p').attr('x','Okay');
Ki
K('p').each(function(el,i){ el.setAttribute('x','Okay'); });
Salt.js
S('*p').forEach(function(el,i){ el.setAttribute('x','Okay'); });
querySelectorAll
document.querySelectorAll('p').forEach(function(el,i){ el.setAttribute('x','Okay'); });
K2
K2('p').each(function(el,i){ el.setAttribute('x','Okay'); });

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
querySelectorAll
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: 5 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:120.0) Gecko/20100101 Firefox/120.0

Browser/OS: Firefox 120 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
jQuery	6918.3 Ops/sec
Zepto	7136.1 Ops/sec
Blissful	11906.9 Ops/sec
Umbrella	12553.1 Ops/sec
Cash	12140.2 Ops/sec
Dom7	8423.1 Ops/sec
Miq	11144.9 Ops/sec
Ki	17101.7 Ops/sec
Salt.js	8527.6 Ops/sec
querySelectorAll	8477.5 Ops/sec
K2	17034.6 Ops/sec

Ultimate DOM Manipulation Benchmark (NodeList.setAttribute) (version: 6)

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

Created: 3 years ago by: Registered User

Jump to the latest result

jQuery

Zepto

Blissful

Umbrella

Cash

Dom7

Miq

Ki

Salt.js

querySelectorAll

K2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A