Benchmark: jQuery body fit onclick filter vs direct - logged now

HTML Preparation code:

<script
			  src="https://code.jquery.com/jquery-3.5.1.min.js"
			  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
			  crossorigin="anonymous"></script>


<form action="#" method="post">
    <div>
        <label for="name">Text Input:</label>
        <input type="text" name="name" class="name" id="name" value="" tabindex="1" />
    </div>

    <div class="wrap">
        <h4>Radio Button Choice</h4>

        <label for="radio-choice-1">Choice 1</label>
        <input type="radio" name="radio-choice-1" class="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />

        <label for="radio-choice-2">Choice 2</label>
        <input type="radio" name="radio-choice-2" class="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
    </div>

    <div>
        <label for="select-choice">Select Dropdown Choice:</label>
        <select name="select-choice" class="select-choice" id="select-choice">
            <option value="Choice 1">Choice 1</option>
            <option value="Choice 2">Choice 2</option>
            <option value="Choice 3">Choice 3</option>
        </select>
    </div>

    <div>
        <label for="textarea">Textarea:</label>
        <textarea cols="40" rows="8" name="textarea" class="textarea" id="textarea"></textarea>
    </div>

    <div>
        <label for="checkbox">Checkbox:</label>
        <input type="checkbox" name="checkbox" class="checkbox" id="checkbox" />
    </div>

    <div>
        <input type="submit" value="Submit" />
    </div>
</form>

Script Preparation code:

window.callable = () => 'result';
window.$notIt = $('.select-choice');
window.$it = $('.radio-choice-1');

Tests:

With click on body
$('body').on('click', '.select-choice', window.callable); window.$notIt.click(); window.$it.click();
With click on document
$(document).on('click', '.select-choice', window.callable); window.$notIt.click(); window.$it.click();
With click on window
$(window).on('click', '.select-choice', window.callable); window.$notIt.click(); window.$it.click();
With click on element
$('.select-choice').on('click', window.callable); window.$notIt.click(); window.$it.click();
With click on wrap
$('.wrap').on('click', '.select-choice', window.callable); window.$notIt.click(); window.$it.click();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
With click on body
With click on document
With click on window
With click on element
With click on wrap

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Firefox 77 on Fedora

View result in a separate tab

Test name	Executions per second
With click on body	647.2 Ops/sec
With click on document	266.5 Ops/sec
With click on window	191.0 Ops/sec
With click on element	165.6 Ops/sec
With click on wrap	157.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the benchmark.

**Benchmark Overview**

The benchmark is designed to test the performance of jQuery's `on()` method when used with different targets (body, document, window, element, or wrap). The goal is to measure which approach yields the fastest execution times for a specific event handler (`window.callable`).

**Options Compared**

There are five options being compared:

1. **Direct Event Handling**: Attaching an event listener directly to the target element.
2. **jQuery's `.on()` method with Body as Target**: Using jQuery's `.on()` method to attach an event listener to the `body` element.
3. **jQuery's `.on()` method with Document as Target**: Using jQuery's `.on()` method to attach an event listener to the `document` object.
4. **jQuery's `.on()` method with Window as Target**: Using jQuery's `.on()` method to attach an event listener to the `window` object.
5. **jQuery's `.on()` method with Element as Target**: Using jQuery's `.on()` method to attach an event listener to a specific element.

**Pros and Cons of Each Approach**

1. **Direct Event Handling**:
	* Pros: No overhead from jQuery, potentially faster execution times.
	* Cons: Requires more manual setup and management of events.
2. **jQuery's `.on()` method with Body as Target**:
	* Pros: Easy to use, reduces boilerplate code.
	* Cons: May lead to slower execution times due to the body element being a larger target.
3. **jQuery's `.on()` method with Document as Target**:
	* Pros: Similar to using `body` as a target, but with more flexibility for attaching multiple event listeners.
	* Cons: Still may lead to slower execution times due to the document object being large.
4. **jQuery's `.on()` method with Window as Target**:
	* Pros: May be faster than using `body` or `document` as targets due to the window object having fewer elements.
	* Cons: Less flexibility compared to using `body` or `document`.
5. **jQuery's `.on()` method with Element as Target**:
	* Pros: Allows for targeting specific elements, reducing overhead from larger targets.
	* Cons: Requires more setup and management of events.

**Library Usage**

In this benchmark, jQuery is used extensively. The `.on()` method is the primary means of attaching event listeners to various targets.

**Device and Browser Details**

The benchmark results are based on data collected from a single device running Firefox 77 on Fedora Linux. Future benchmarks can expand to include more devices, browsers, and operating systems to improve generalizability.

By understanding the pros and cons of each approach, you can make informed decisions about which method is best suited for your specific use case when working with jQuery's event handling capabilities.

Related benchmarks:

jQuery body fit onclick filter vs direct - logged now (version: 3)

https://stackoverflow.com/questions/62402748/jquery-selector-type-on-click-speed

Comparing performance of: With click on body vs With click on document vs With click on window vs With click on element vs With click on wrap

Created: 4 years ago by: Registered User

Jump to the latest result

With click on body

With click on document

With click on window

With click on element

With click on wrap

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