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

getElementById

1.3M/s

Cash

1.2M/s

Salt.js

1.2M/s

Dom7

1.1M/s

Zepto

1.0M/s

Blissful

992K/s

querySelector

986K/s

jQuery

866K/s

window array

698K/s

querySelectorAll

603K/s

490K/s

Miq

459K/s

Umbrella

310K/s

View exact numbers

Test name	Executions per second
✓ getElementById	1,251,221 Ops/sec
Cash	1,241,939 Ops/sec
Salt.js	1,188,173 Ops/sec
Dom7	1,050,159 Ops/sec
Zepto	1,024,190 Ops/sec
Blissful	992,086 Ops/sec
querySelector	986,472 Ops/sec
jQuery	866,430 Ops/sec
window array	697,927 Ops/sec
querySelectorAll	603,157 Ops/sec
Ki	490,212 Ops/sec
Miq	459,478 Ops/sec
Umbrella	309,968 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!

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

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: 6 years ago by: Registered User

Go 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):

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

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: 6 years ago by: Registered User

Go 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):

Related benchmarks

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`