Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
test click jquery
(version: 0)
test clicks
Comparing performance of:
one vs many vs parent
Created:
4 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="container"><div class="one"></div> <div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
Tests:
one
$('.one').on('click', function() {});
many
$('.many').on('click', function() {});
parent
$('#container').on('click', '.many', function() {});
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
one
many
parent
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):
**Benchmark Overview** The provided JSON represents a JavaScript benchmark test case on MeasureThat.net. The test aims to measure the performance of jQuery's event handling functionality. **Benchmark Definition** The benchmark definition is an array of individual test cases, each with a unique name ("one", "many", and "parent"). Each test case has a corresponding HTML preparation code and a script that defines the event handling function for a specific jQuery selector. **Options Compared** In this benchmark, two main options are compared: 1. **Inline event handler**: The first test case, "one", uses an inline event handler with `$('.one').on('click', function() {})`. This approach involves adding the event handler directly to the element in the HTML. 2. **Delegated event handler**: The second and third test cases, "many" and "parent", use delegated event handlers with `$('.many').on('click', function())` and `$('#container').on('click', '.many', function())`, respectively. This approach involves attaching the event handler to a parent element and using a selector to delegate the event to child elements. **Test Cases** Each test case measures the execution time of the corresponding script: 1. **"one"**: Measures the execution time of an inline event handler with `$('.one').on('click', function() {})`. 2. **"many"**: Measures the execution time of a delegated event handler with `$('.many').on('click', function())`. The HTML preparation code creates multiple elements with class "many". 3. **"parent"**: Measures the execution time of a delegated event handler with `$('#container').on('click', '.many', function())`. The HTML preparation code creates an element with id "container" and multiple child elements with class "many". **Benchmark Results** The latest benchmark results show the performance metrics for each test case: 1. **"one"**: 384,160 executions per second (FPS) 2. **"parent"**: 6,051 FPS 3. **"many"**: 287,882 FPS These results suggest that inline event handlers are generally faster than delegated event handlers. **Conclusion** In summary, this benchmark test case on MeasureThat.net compares the performance of different jQuery event handling approaches: inline and delegated event handlers. The results indicate that inline event handlers are typically faster, but may require more maintenance and updates when dealing with complex event handling scenarios.
Related benchmarks:
Find vs select
Find vs select
event delegation
event delegation
Comments
Confirm delete:
Do you really want to delete benchmark?