Benchmark: Drupal once (variables in URL)

Drupal once (variables in URL) (version: 11)

https://www.drupal.org/project/drupal/issues/2402103 Change the number of div created and the number of once items with URL parameters: to create 100 divs with 5 different "once" items add to the URL: ?div=100&once=5 to create 5 divs with 100 different "once" items add to the URL: ?div=5&once=100

Comparing performance of: jQuery.once vs once

Created: 4 years ago by: Registered User

Jump to the latest result

HTML Preparation code:


<script src='https://unpkg.com/jquery@3.5.1/dist/jquery.min.js'></script>
<script src='https://unpkg.com/jquery-once@2.2.3/jquery.once.min.js'></script>
<!-- IE Polyfills -->
<script>String.prototype.repeat||(String.prototype.repeat=function(t){"use strict";if(null==this)throw new TypeError("can't convert "+this+" to object");var e=""+this;if((t=+t)!=t&&(t=0),t<0)throw new RangeError("repeat count must be non-negative");if(t==1/0)throw new RangeError("repeat count must be less than infinity");if(t=Math.floor(t),0==e.length||0==t)return"";if(e.length*t>=1<<28)throw new RangeError("repeat count must not overflow maximum string size");var r=e.length*t;for(t=Math.floor(Math.log(t)/Math.log(2));t;)e+=e,t-=1;return e+=e.substring(0,r-e.length)}),Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector);</script>
<script src='https://unpkg.com/once-dom@3.5.0/dist/once.min.js'></script>
  
<div id="wrapper"></div>

Script Preparation code:

var totalDivs = 10, totalOnce = 3;
var wrapper = document.querySelector('#wrapper');
var $wrapper = jQuery(wrapper);

// uglysauce to make it work on IE11
var params = parent.window.location.search.replace('?', '').split('&');
params.forEach(function (par) { 
  var d = par.split('=');
  if (d[0] === 'div') { totalDivs = parseInt(d[1]); }
  if (d[0] === 'once') { totalOnce = parseInt(d[1]); }
})
wrapper.innerHTML = '<div class="test"></div>'.repeat(totalDivs); 

// Add some info in the test name to be able to compare things
var extra = ' (div=' + totalDivs + ', once=' + totalOnce + ')';
var newjQo = 'jQuery.once ' + extra;
var newO =  'once ' + extra;

parent.document.querySelector('[data-row-for^="jQuery.once"]').setAttribute('data-row-for', newjQo);
parent.document.querySelector('[data-row-for^="once"]').setAttribute('data-row-for', newO);
// Change the test names in the string that will be eval'ed right after this one.
content = content.replace("'jQuery.once'", "'" + newjQo + "'").replace("'once'", "'" + newO + "'");

Tests:

jQuery.once
for (var i = 0; i < totalOnce; i++) { $wrapper.find('.test').once('test' + i); }
once
for (var i = 0; i < totalOnce; i++) { once('test' + i, '.test', wrapper); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery.once
once

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Browser/OS: Chrome 116 on Linux

View result in a separate tab

Test name	Executions per second
jQuery.once (div=10, once=1)	74483.4 Ops/sec
once (div=10, once=1)	199400.2 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a benchmark test for comparing the performance of two JavaScript libraries: jQuery and once.

**What is tested?**

In this benchmark, two individual test cases are compared:

1. `jQuery.once`: This test case uses the `jQuery.once` method to create multiple occurrences of an element with a unique ID.
2. `once`: This test case uses the standalone `once` library to achieve the same result.

**Options being compared**

The options being compared are:

* Performance: The execution speed of each test case, measured in executions per second (EPS).
* Complexity: The amount of code required to implement each test case.
* Library size: The size of the JavaScript files loaded for each library.

**Pros and Cons**

**jQuery.once**

Pros:

* Wide adoption and support from the jQuery community.
* Easy to use and familiar API for jQuery developers.
* Fast execution speed, as it leverages the existing jQuery engine.

Cons:

* Additional dependency on jQuery, which can increase page load times.
* May not be suitable for projects that avoid using jQuery due to licensing or performance concerns.

**once**

Pros:

* Lightweight and compact, making it easier to include in smaller projects.
* Fast execution speed, as it uses a dedicated DOM manipulation engine.
* Suitable for projects that want to use a lightweight alternative to jQuery.

Cons:

* Smaller community support compared to jQuery.
* Steeper learning curve due to its unique API.

**Other considerations**

* The `jQuery.once` method relies on the existing jQuery engine, which can affect performance and compatibility with older browsers.
* The `once` library uses a dedicated DOM manipulation engine, which may lead to differences in execution speed and behavior compared to jQuery's native methods.

**Library used: jQuery-once**

The `jQuery_once` library is used as a bridge between jQuery and the `once` library. It provides a jQuery-style API for using the standalone `once` library, making it easier to integrate into existing projects that use jQuery.

**Special JS feature or syntax**

None of the libraries in this benchmark rely on special JavaScript features or syntax beyond what's standard in modern browsers. However, if you're interested in exploring more advanced topics like Web Workers, async/await, or Promises, I can provide information on those as well!

Related benchmarks: