Benchmark: Ultimate DOM Manipulation Benchmark (Element.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})();

let p = null;

Tests:

jQuery
jQuery('#test').attr('x','Okay');
Zepto
Zepto('#test').attr('x','Okay');
Blissful
Bliss('#test').setAttribute('x','Okay');
Umbrella
u('#test').attr('x','Okay');
Cash
cash('#test').attr('x','Okay');
Dom7
Dom7('#test').attr('x','Okay');
Miq
miq('#test').attr('x','Okay');
Ki
K('#test')[0].setAttribute('x','Okay');
Salt.js
S('#test').setAttribute('x','Okay');
querySelector
document.querySelector('#test').setAttribute('x','Okay');
getElementById
document.getElementById('test').setAttribute('x','Okay');
querySelectorAll
document.querySelectorAll('#test')[0].setAttribute('x','Okay');
window array
window['test'].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
querySelector
getElementById
querySelectorAll
window array

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; rv:131.0) Gecko/20100101 Firefox/131.0

Browser/OS: Firefox 131 on Windows

View result in a separate tab

Test name	Executions per second
jQuery	866430.5 Ops/sec
Zepto	1024190.5 Ops/sec
Blissful	992085.9 Ops/sec
Umbrella	309967.7 Ops/sec
Cash	1241939.2 Ops/sec
Dom7	1050159.4 Ops/sec
Miq	459478.2 Ops/sec
Ki	490212.3 Ops/sec
Salt.js	1188172.6 Ops/sec
querySelector	986472.2 Ops/sec
getElementById	1251221.4 Ops/sec
querySelectorAll	603157.3 Ops/sec
window array	697926.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

You've provided a JSON array of data related to browser performance tests. It appears that the data is from WebPagetest, a tool used to measure the performance and usability of web pages.

To answer your question, I'll need more context or information about what you're trying to achieve. However, based on the data you provided, here are some observations:

1. **Most test names**: The most common test names are "Dom7", "jQuery", and "window array". This might indicate that these tests are particularly relevant to the performance of web pages.
2. **Browser performance**: The data suggests that Firefox 131 performs well on Windows 10 devices, with high execution rates for various test cases. Other browsers (e.g., Chrome) are not represented in this dataset.
3. **Test variation**: There is a significant variation in the execution rate across different test cases and browsers. This might suggest that there are performance bottlenecks or areas for improvement.

If you could provide more context about what you're trying to achieve, I'd be happy to help you analyze the data further. For example:

* Are you interested in identifying specific performance issues or areas for optimization?
* Do you need to compare the performance of different browsers or versions?
* Is there a particular metric (e.g., execution rate, latency) that you're focusing on?

Please let me know how I can assist you better!

Related benchmarks:

Ultimate DOM Manipulation Benchmark (Element.setAttribute) (version: 1)

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

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

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):