Benchmark: Vanilla JS vs Jquery (parents selector)

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="fuck">
  <div class="shit">
    <div class="fart">
      <div class="hell">
        <div class="shitty">
          <div class="hella">
            <div class="farta">
              <div class="meow">
                <div class="spag">
                  <div class="hetti">
                    <div class="wtfm8">
                      <div class="ysomanyclassesyo">
                        deeply buried
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="fuck">
  <div class="shit">
    <div class="fart">
      <div class="hell">
        <div class="shitty">
          <div class="hella">
            <div class="farta">
              <div class="meow">
                <div class="spag">
                  <div class="hetti">
                    <div class="wtfm8">
                      <div class="ysomanyclassesyo">
                        deeply buried
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="fuck">
  <div class="shit">
    <div class="fart">
      <div class="hell">
        <div class="shitty">
          <div class="hella">
            <div class="farta">
              <div class="meow">
                <div class="spag">
                  <div class="hetti">
                    <div class="wtfm8">
                      <div class="ysomanyclassesyo">
                        deeply buried
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="fuck">
  <div class="shit">
    <div class="fart">
      <div class="hell">
        <div class="shitty">
          <div class="hella">
            <div class="farta">
              <div class="meow">
                <div class="spag">
                  <div class="hetti">
                    <div class="wtfm8">
                      <div class="ysomanyclassesyo">
                        deeply buried
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="fuck">
  <div class="shit">
    <div class="fart">
      <div class="hell">
        <div class="shitty">
          <div class="hella">
            <div class="farta">
              <div class="meow">
                <div class="spag">
                  <div class="hetti">
                    <div class="wtfm8">
                      <div class="ysomanyclassesyo">
                        deeply buried
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Tests:

Vanilla JS
document.querySelectorAll('.ysomanyclassesyo').forEach(e => e.closest('.fuck').classList.add('fuckster') );
jQuery
$('.ysomanyclassesyo').parents('.fuck').addClass('fuckster');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Vanilla JS
jQuery

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36

Browser/OS: Chrome 100 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Vanilla JS	149879.3 Ops/sec
jQuery	28191.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark is designed to compare the performance of vanilla JavaScript and jQuery for a specific use case: selecting an element with a class name that is deeply nested within multiple elements (in this case, ".ysomanyclassesyo") and then adding a class to its closest ancestor element ("." + "fuck").

**Benchmark Definition**

The benchmark definition consists of two test cases:

1. **Vanilla JS**: The script uses the `document.querySelectorAll()` method to select all elements with the class name ".ysomanyclassesyo" and then iterates over each selected element using a `forEach` loop. For each element, it calls the `closest()` method on the element to find its closest ancestor element with the class name ".fuck". Finally, it adds a new class "fuckster" to that ancestor element using the `classList.add()` method.
2. **jQuery**: The script uses jQuery's `$()` function to select all elements with the class name ".ysomanyclassesyo". It then calls the `.parents()` method on the selected element to find its closest ancestor element with the class name ".fuck". Finally, it adds a new class "fuckster" to that ancestor element using the `.addClass()` method.

**Comparison**

The benchmark compares the performance of vanilla JavaScript and jQuery for this specific use case. The results show that:

* Vanilla JS is slightly faster than jQuery, with an average execution time of 149,879.28 milliseconds per second (ms/s) compared to jQuery's 28,191.61 ms/s.

**Pros and Cons**

Here are some pros and cons of each approach:

**Vanilla JS:**

Pros:

* Faster performance
* Less dependency on external libraries
* More control over the execution flow

Cons:

* Requires manual DOM traversal and manipulation
* May be less readable or maintainable for complex use cases

**jQuery:**

Pros:

* Simplifies DOM traversal and manipulation with jQuery's methods (e.g., `.closest()` and `.addClass()`)
* Can reduce code size and improve readability
* Provides a more convenient API for common DOM operations

Cons:

* Adds external dependency on the jQuery library
* May be slower than vanilla JavaScript due to the overhead of the library
* Less control over the execution flow compared to vanilla JavaScript

**Library Considerations**

In this benchmark, jQuery is used as the external library. The performance difference between vanilla JavaScript and jQuery is likely due to the additional overhead introduced by the jQuery library.

**Device Platform and Browser**

The results show that Chrome 100 on a Mac OS X 10.15.7 device platform performs better than other browsers or devices. This may be due to the specific optimizations or configurations used in this browser and device combination.

Overall, this benchmark highlights the importance of considering performance, readability, and maintainability when choosing between vanilla JavaScript and jQuery for your projects.

Related benchmarks:

Vanilla JS vs Jquery (parents selector) (version: 0)

Comparing performance of: Vanilla JS vs jQuery

Created: 3 years ago by: Guest

Jump to the latest result

Vanilla JS

jQuery

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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