Benchmark: Vanilla JS VS JQuery DOM perfomance

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="nhngodo">Hi! NHNgodo!</div>

Tests:

Vanilla JS
var el = document.getElementById("nhngodo"); el.innerText = "Hi! NHNgodo!";
Jquery
$("#nhngodo").text("Hi! NHNgodo!");

Historical Performance Data aggregated from 150 community runs

Desktop Results:

Chrome 93 runs

Vanilla JS

1.5M/s

Jquery

588K/s

Fastest: Vanilla JS (2.5x faster)

View exact numbers

✓ Vanilla JS: 1,457,670 ops/sec
• Jquery: 588,194 ops/sec

Firefox 31 runs

Vanilla JS

401K/s

Jquery

295K/s

Fastest: Vanilla JS (1.4x faster)

View exact numbers

✓ Vanilla JS: 400,948 ops/sec
• Jquery: 295,328 ops/sec

Mobile Results:

Chrome 18 runs

Vanilla JS

547K/s

Jquery

206K/s

Fastest: Vanilla JS (2.7x faster)

View exact numbers

✓ Vanilla JS: 546,518 ops/sec
• Jquery: 205,527 ops/sec

Safari 8 runs

Vanilla JS

5.2M/s

Jquery

1.9M/s

Fastest: Vanilla JS (2.7x faster)

View exact numbers

✓ Vanilla JS: 5,230,098 ops/sec
• Jquery: 1,920,209 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 4 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Browser/OS: Chrome 146 on Windows

View result in a separate tab

Vanilla JS

950K/s

Jquery

221K/s

View exact numbers

Test name	Executions per second
✓ Vanilla JS	950,238 Ops/sec
Jquery	221,287 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its components.

**Benchmark Definition**

The benchmark is comparing the performance of two approaches: Vanilla JavaScript and jQuery for setting the text content of an HTML element.

**Options compared**

In this benchmark, we have two options being compared:

1. **Vanilla JavaScript**: This option uses the native JavaScript API to set the text content of an element.
```javascript
var el = document.getElementById("nhngodo");
el.innerText = "Hi! NHNgodo!";
```
2. **jQuery**: This option uses the jQuery library to select and manipulate DOM elements.

**Pros and Cons**

Here are some pros and cons for each approach:

**Vanilla JavaScript**

Pros:

* Faster execution time since it doesn't require loading an additional library
* More control over the execution environment (e.g., no dependencies on a specific browser or version)

Cons:

* Requires more boilerplate code to set up and manipulate DOM elements

**jQuery**

Pros:

* Easier to write and more concise code for simple DOM manipulations
* Provides a robust and reliable way to handle common DOM tasks

Cons:

* Slower execution time since it involves loading an additional library
* May introduce dependencies on specific browser versions or configurations

**Library usage (jQuery)**

The jQuery library is used to select the `#nhngodo` element and set its text content. The `$(selector)` syntax is used to create a jQuery object that represents the selected element.

In this benchmark, the `text()` method is used to set the text content of the element. The `$` symbol is used to access the global jQuery object, which is likely included in the HTML page through the `<script>` tag.

**Special JS feature or syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark. However, it's worth noting that some versions of Chrome have introduced additional security measures that may affect the execution time of certain scripts, including those using jQuery.

**Other alternatives**

If you're interested in exploring alternative approaches for DOM manipulation, here are a few options:

1. **React**: A popular JavaScript library for building user interfaces. While it's not directly related to DOM manipulation, React provides a robust way to manage and update the state of your application.
2. **Angular**: Another popular JavaScript framework that includes tools for managing and manipulating DOM elements.
3. **Pure JavaScript libraries**: There are several pure JavaScript libraries available that provide lightweight alternatives to jQuery or Vanilla JavaScript, such as Lodash or Slick.js.

Keep in mind that these alternatives may have different performance characteristics and trade-offs compared to the options tested in this benchmark.

Vanilla JS VS JQuery DOM perfomance (version: 0)

Vanilla JS VS JQuery DOM perfomance

Comparing performance of: `Vanilla JS vs Jquery`

Created: 8 years ago by: Guest

Go to the latest result

Vanilla JS

Jquery

Historical Performance Data aggregated from 150 community runs

Desktop Results:

Chrome 93 runs

Firefox 31 runs

Mobile Results:

Chrome 18 runs

Safari 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Vanilla JS VS JQuery DOM perfomance (version: 0)

Vanilla JS VS JQuery DOM perfomance

Comparing performance of: Vanilla JS vs Jquery

Created: 8 years ago by: Guest

Go to the latest result

Vanilla JS

Jquery

Historical Performance Data aggregated from 150 community runs

Desktop Results:

Chrome 93 runs

Firefox 31 runs

Mobile Results:

Chrome 18 runs

Safari 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Vanilla JS vs Jquery`