Benchmark: Vanilla JS VS JQuery DOM perfomance + getbyid(elId)

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="nhngodo">Hi! NHNgodo!</div>
<script>
window._getbyid = {};
function getbyid(elId){
    if(!window._getbyid[elId]){
        window._getbyid[elId] = document.getElementById(elId);
	}
    return window._getbyid[elId];
}
</script>

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Vanilla JS
Jquery
getbyid

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 132 on Windows

View result in a separate tab

Test name	Executions per second
Vanilla JS	1102079.8 Ops/sec
Jquery	224086.7 Ops/sec
getbyid	1253308.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares the performance of three JavaScript approaches:

1. Vanilla JS (native JavaScript)
2. jQuery DOM manipulation
3. Custom `getbyid` library

**Script Preparation Code**

The script preparation code is empty (`"Script Preparation Code": null`), which means that no special setup or initialization is required for the benchmark.

**Individual Test Cases**

There are three test cases:

1. **Vanilla JS**
	* Benchmark Definition: `var el = document.getElementById("nhngodo"); el.innerText = "Hi! NHNgodo!");`
	* Purpose: This test case measures the performance of native JavaScript's `document.getElementById` and string manipulation.
2. **jQuery**
	* Benchmark Definition: `$("#nhngodo").text("Hi! NHNgodo!");`
	* Purpose: This test case measures the performance of jQuery's DOM manipulation functions (`$` and `.text()`).
3. **Custom getbyid library**
	* Benchmark Definition: `getbyid("nhngodo").innerText = "Hi! NHNgodo!");`
	* Purpose: This test case measures the performance of a custom `getbyid` function that wraps native JavaScript's `document.getElementById`.

**Library Explanation**

The custom `getbyid` library is not a standard JavaScript library. It appears to be a simple wrapper around native JavaScript's `document.getElementById`, caching the result for future lookups.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax used in this benchmark. The code uses standard JavaScript syntax and does not rely on any experimental features.

**Pros and Cons of Different Approaches**

Here's a brief summary of the pros and cons of each approach:

1. **Vanilla JS**
	* Pros: Native performance, lightweight, easy to understand.
	* Cons: May require more manual DOM manipulation, less concise code.
2. **jQuery**
	* Pros: Concise code, efficient DOM manipulation, widely adopted.
	* Cons: Requires additional library load, may have slower startup times.
3. **Custom getbyid library**
	* Pros: Caching mechanism can improve performance for repeated lookups, simple implementation.
	* Cons: May introduce overhead due to the custom wrapper function.

**Other Alternatives**

Some alternative approaches that are not included in this benchmark include:

1. **React or Angular**: JavaScript frameworks that provide DOM manipulation functions with built-in optimizations and caching mechanisms.
2. **Preact**: A lightweight JavaScript library that aims to optimize React's performance for smaller projects.
3. **DomPurify**: A library that provides a safer way to manipulate DOM nodes, reducing the risk of cross-site scripting (XSS) attacks.

These alternatives may offer better performance or features than the custom `getbyid` library, but they also come with additional overhead and complexity due to the framework or library itself.

Related benchmarks:

Vanilla JS VS JQuery DOM perfomance + getbyid(elId) (version: 0)

Vanilla JS VS JQuery DOM perfomance

Comparing performance of: Vanilla JS vs Jquery vs getbyid

Created: 4 years ago by: Guest

Jump to the latest result

Vanilla JS

Jquery

getbyid

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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