<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>
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 + "'");
for (var i = 0; i < totalOnce; i++) {
$wrapper.find('.test').once('test' + i);
}
for (var i = 0; i < totalOnce; i++) {
once('test' + i, '.test', wrapper);
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
jQuery.once | |
once |
Test name | Executions per second |
---|---|
jQuery.once (div=10, once=1) | 74483.4 Ops/sec |
once (div=10, once=1) | 199400.2 Ops/sec |
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:
jQuery.once
: This test case uses the jQuery.once
method to create multiple occurrences of an element with a unique ID.once
: This test case uses the standalone once
library to achieve the same result.Options being compared
The options being compared are:
Pros and Cons
jQuery.once
Pros:
Cons:
once
Pros:
Cons:
Other considerations
jQuery.once
method relies on the existing jQuery engine, which can affect performance and compatibility with older browsers.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!