Benchmark: Drupal once - MeasureThat.net

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>
<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>

Script Preparation code:

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);

Tests:

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

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: 4 years ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0

Browser/OS: Firefox 78 on Ubuntu

View result in a separate tab

Test name	Executions per second
jQuery.once	36294.7 Ops/sec
once	58390.1 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 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:

1. **jQuery.once**: This option uses the jQuery library to apply the class name conditionally.
2. **once**: This option uses a custom "once" library to apply the class name conditionally.

**Pros and Cons of Each Approach**

**jQuery.once**

Pros:

* Well-established and widely used library
* Easy to use and familiar API for developers

Cons:

* Adds an additional dependency (jQuery) to the benchmark
* May introduce overhead due to library initialization and DOM manipulation

**once**

Pros:

* Custom implementation, potentially optimized for performance
* Does not add an external dependency (jQuery)

Cons:

* Less well-established and less widely used library
* May require more manual optimization and maintenance

**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:

* **Lodash**: A popular utility library that provides a `once` function.
* **Mithril**: A lightweight and fast JavaScript framework that includes a similar functionality to jQuery's `once`.
* **Manual implementation**: You could implement the same functionality manually using vanilla JavaScript, which would eliminate any external dependencies.

Keep in mind that each alternative has its own pros and cons, and some may be more suitable for your specific use case.

Related benchmarks:

Drupal once (version: 0)

https://www.drupal.org/project/drupal/issues/2402103

Comparing performance of: jQuery.once vs once

Created: 4 years ago by: Guest

Jump to the latest result

jQuery.once

once

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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