Benchmark: jQuery body fit onclick filter vs direct

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

Tests:

With click on body
$('body').on('click', '.select-choice', window.callable); $('.select-choice').trigger('click');
With click on document
$(document).on('click', '.select-choice', window.callable); $('.select-choice').trigger('click');
With click on window
$(window).on('click', '.select-choice', window.callable); $('.select-choice').trigger('click');
With click on element
$('.select-choice').on('click', window.callable); $('.select-choice').trigger('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

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of MeasureThat.net and explore the JavaScript microbenchmark.

**What is being tested?**

The benchmark tests how fast different libraries and approaches can filter data when an element with a specific class (`select-choice`) is clicked.

**Options compared:**

1. **Direct**: Using jQuery's `$` function to select elements, followed by `.on()` or `.off()` method for event binding, and finally `.trigger('click')` to simulate a click.
2. **jQuery body fit onclick filter vs direct**: A variation of the above option where the element with class `select-choice` is bound to an event handler using `.on()`, but the actual filtering happens only when the click occurs (`window.callable()`).
3. **Document**: Using jQuery's `$` function to select elements, followed by `.on()` method for event binding, and finally `.trigger('click')`.
4. **Window**: Using jQuery's `$` function to select elements, followed by `.on()` method for event binding, and finally `.trigger('click')`.
5. **Element**: Using jQuery's `$` function to select the specific element with class `select-choice`, followed by `.on()` or `.off()` method for event binding, and finally `.trigger('click')`.

**Pros and Cons:**

1. **Direct**:
	* Pros: Fast and lightweight, as it doesn't require a library.
	* Cons: May not work with older browsers that don't support `on()` method.
2. **jQuery body fit onclick filter vs direct**: 
	* Pros: Allows the filtering to happen only when the click occurs, which might be beneficial for performance-critical code.
	* Cons: Requires jQuery and has a slightly higher overhead due to the use of `window.callable()`.
3. **Document**:
	* Pros: Works with most modern browsers that support `.on()` method.
	* Cons: May have a slight overhead due to the use of `.on()` method, which can lead to memory leaks if not properly cleaned up.
4. **Window**:
	* Pros: Similar to `Document`, but uses `.on()` method on the `window` object instead.
	* Cons: Same as `Document`.
5. **Element**:
	* Pros: Fast and lightweight, as it only targets the specific element with class `select-choice`.
	* Cons: May not work with older browsers that don't support `.on()` or `.off()` methods on non-global elements.

**Libraries used:**

1. jQuery: A popular JavaScript library for DOM manipulation and event handling.

**Special JS feature/syntax:**

None mentioned in the benchmark definition, but `.trigger('click')` is used to simulate a click event.

**Other alternatives:**

If you don't want to use jQuery, you can also use other libraries like:

1. Lodash: Provides a `on()` method for event binding.
2. Underscore.js: Provides an `_on()` method for event binding.
3. Vanilla JavaScript: Uses the `addEventListener` method for event binding.

Keep in mind that these alternatives might have different performance characteristics and compatibility with older browsers.

Related benchmarks:

jQuery body fit onclick filter vs direct (version: 0)

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

Created: 5 years ago by: Guest

Jump to the latest result

With click on body

With click on document

With click on window

With click on element

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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