<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>
<script>
/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
(function () {
var wsRE = /[\11\12\14\15\40]+/;
var attrName = 'data-once';
function checkId(id) {
if (typeof id !== 'string') {
throw new TypeError('The once id parameter must be a string');
}
if (id === '' || wsRE.test(id)) {
throw new Error('The once id parameter must not be empty or contain spaces');
}
return id;
}
function checkElement(element) {
if (!(element instanceof Element)) {
throw new TypeError('The element must be an instance of Element');
}
return true;
}
function filter(elements, selector, apply) {
return Array.prototype.filter.call(elements, function (element) {
var selected = checkElement(element) && element.matches(selector);
if (selected && apply) {
apply(element);
}
return selected;
});
}
function updateAttribute(_ref) {
var value = _ref.value,
add = _ref.add,
remove = _ref.remove;
var result = [];
value.trim().split(wsRE).forEach(function (item) {
if (result.indexOf(item) < 0 && item !== remove) {
result.push(item);
}
});
if (add) {
result.push(add);
}
return result.join(' ');
}
function once(elements, id) {
var dataId = checkId(id);
return filter(elements, ":not([".concat(attrName, "~=\"").concat(dataId, "\"])"), function (element) {
var value = dataId;
if (element.hasAttribute(attrName)) {
value = updateAttribute({
value: element.getAttribute(attrName),
add: dataId
});
}
element.setAttribute(attrName, value);
});
}
once.remove = function (elements, id) {
var dataId = checkId(id);
return filter(elements, "[".concat(attrName, "~=\"").concat(dataId, "\"]"), function (element) {
element.setAttribute(attrName, updateAttribute({
value: element.getAttribute(attrName),
remove: dataId
}));
});
};
once.find = function (elements, id) {
var dataId = checkId(id);
return filter(elements, "[".concat(attrName, "~=\"").concat(dataId, "\"]"));
};
window.once = once;
})();
</script>
<div id="wrapper"></div>
var url = new URL(window.location);
var totalDivs = url.searchParams.get('div') || 10;
var totalOnce = url.searchParams.get('once') || 3;
var wrapper = document.querySelector('#wrapper');
console.log(totalDivs, totalOnce);
wrapper.innerHTML = '<div class="test"></div>'.repeat(totalDivs);
var items = wrapper.querySelectorAll('div.test');
console.log(items);
var $items = jQuery(items);
for (var i = 0; i < totalOnce; i++) {
$items.once('test' + i);
}
for (var i = 0; i < totalOnce; i++) {
once(items, 'test' + i);
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
jQuery.once | |
once |
Test name | Executions per second |
---|---|
jQuery.once | 36294.7 Ops/sec |
once | 58390.1 Ops/sec |
The provided JSON represents a JavaScript microbenchmark test case for measuring the performance of two JavaScript libraries: jQuery and a custom "once" library.
Benchmark Definition
The benchmark definition is a code snippet that creates an array of elements, sets a class name on each element, and then calls either the jQuery.once
or once
function to apply the class name conditionally. The code also includes script preparation and HTML preparation codes.
Options Compared
Two options are compared in this benchmark:
Pros and Cons of Each Approach
jQuery.once
Pros:
Cons:
once
Pros:
Cons:
Library: jQuery
jQuery is a popular JavaScript library that provides a convenient way to manipulate the DOM and perform DOM-based operations. In this benchmark, jQuery is used to apply the class name conditionally using its once
method.
Library: Custom "once" Library
The custom "once" library is a custom implementation of the same functionality as jQuery's once
method. This library is not widely used or well-established, but it may be optimized for performance and tailored to specific use cases.
Special JavaScript Feature/Syntax
There are no special JavaScript features or syntax used in this benchmark that would require explanation.
Other Alternatives
If you're interested in exploring other alternatives, here are a few options:
once
function.once
.Keep in mind that each alternative has its own pros and cons, and some may be more suitable for your specific use case.