Benchmark: add active class to label on click

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<form action="" class="js-form">
  <fieldset>
    <div>
      <label><input type="radio" name="s"/></label>
      <label><input type="radio" name="s"/></label>
      <label><input type="radio" name="s"/></label>
      <label><input type="radio" name="s"/></label>
      <label><input type="radio" name="s"/></label>
      <label><input type="radio" name="s"/></label>
    </div>
  </fieldset>
</form>

Tests:

vanilla
var customForms = document.querySelectorAll(".js-form"); var customFormLabels; var customFormLabelSiblings; for (var customForm of customForms) { customFormLabels = customForm.querySelectorAll("label"); for (var label of customFormLabels) { label.addEventListener("click", function(e) { customFormLabelSiblings = this.parentNode.querySelectorAll("label"); e.preventDefault(); for (var sibling of customFormLabelSiblings) { sibling.classList.remove("is-active"); } this.classList.add("is-active"); }); } }
jQuery
$(".js-form input").on("click", function() { $(this).parent().siblings().removeClass("is-active"); $(this).parent().addClass("is-active"); })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
vanilla
jQuery

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 JavaScript microbenchmarks!

**Benchmark Overview**

The provided benchmark compares two approaches to adding an active class to labels on click: jQuery and vanilla JavaScript. The test case is designed to measure the performance difference between these two methods.

**Options Compared**

Two options are being compared:

1. **jQuery**: This approach uses the jQuery library, a popular JavaScript library for DOM manipulation.
2. **Vanilla JavaScript**: This approach uses only built-in JavaScript functions and features, without relying on any external libraries.

**Pros and Cons of Each Approach**

**jQuery:**

Pros:

* Easier to write and maintain, thanks to jQuery's extensive API
* Faster execution times, as jQuery is optimized for performance

Cons:

* Adds an extra HTTP request and payload, which can impact initial load time
* Requires including the entire jQuery library, even if only a single function is used

**Vanilla JavaScript:**

Pros:

* Reduces HTTP requests and payload, potentially improving page load times
* Allows developers to write more lightweight, optimized code

Cons:

* Requires more manual effort and care when writing efficient code
* May lead to slower execution times due to the overhead of DOM manipulation

**Library Used**

In this benchmark, jQuery is used in its version 3.3.1.

**Special JS Feature/Syntax**

None are mentioned, so I won't elaborate on any special JavaScript features or syntax used in these test cases.

**Other Alternatives**

If you're interested in exploring alternative approaches to DOM manipulation, consider:

* React: A popular front-end library for building reusable UI components
* Angular: Another prominent front-end framework that provides a rich set of tools for building complex web applications
* Vue.js: A progressive and flexible front-end framework for building scalable web applications

Keep in mind that each alternative has its own strengths, weaknesses, and trade-offs. The choice ultimately depends on your project's specific needs, your team's expertise, and your personal preferences.

In summary, this benchmark provides a straightforward comparison between jQuery and vanilla JavaScript approaches to adding an active class to labels on click. By understanding the pros and cons of each approach, you can make informed decisions when choosing between these options for your own projects.

Related benchmarks:

add active class to label on click (version: 0)

jQuery vs vanilla adding active class to label on click

Comparing performance of: vanilla vs jQuery

Created: 5 years ago by: Guest

Jump to the latest result

vanilla

jQuery

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