Benchmark: getElementById vs id vs wrapper vs global var toggling class

HTML Preparation code:

<div id="test"></div>

Script Preparation code:

function $(id){return document.getElementById(id);};
var testdiv = document.getElementById("test");

Tests:

id
test.classList.toggle("monkey");
getElementById
document.getElementById("test").classList.toggle("monkey");
wrapper
$("test").classList.toggle("monkey");
global var
testdiv.classList.toggle("monkey");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
id
getElementById
wrapper
global var

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 break down the provided benchmark definition and test cases to understand what is being tested.

**Benchmark Definition JSON**

The provided JSON defines a benchmark with two main parts:

1. **Script Preparation Code**: This code defines a custom function `$` that returns the result of `document.getElementById(id)`. It also sets up a variable `testdiv` using this custom function.
2. **Html Preparation Code**: This code defines a simple HTML structure containing a `<div>` element with an ID of "test".

**Individual Test Cases**

The benchmark consists of four test cases, each with a different way to access and toggle the class "monkey" on the `testdiv` element:

1. **`id`**:
	* Benchmark Definition: `test.classList.toggle("monkey");`
	* This test case uses the `classList` property of the `testdiv` element directly.
2. **`getElementById`**:
	* Benchmark Definition: `document.getElementById("test").classList.toggle("monkey");`
	* This test case uses the `document.getElementById()` method to retrieve the `testdiv` element and then accesses its `classList` property.
3. **`wrapper`**:
	* Benchmark Definition: `$("test").classList.toggle("monkey");`
	* This test case uses the custom function `$` defined in the Script Preparation Code, which takes an ID as an argument and returns the result of `document.getElementById(id)`.
4. **`global var`**:
	* Benchmark Definition: `testdiv.classList.toggle("monkey");`
	* This test case directly accesses the `classList` property of the global variable `testdiv`.

**Options Compared**

The benchmark compares the performance of these four different approaches:

1. Directly accessing `classList` (ID)
2. Using `document.getElementById()` to access the element (GetById)
3. Using a custom wrapper function (`$`) (Wrapper)
4. Directly accessing the global variable's property (Global Var)

**Pros and Cons**

Here are some pros and cons of each approach:

1. **Directly accessing `classList` (ID)**:
	* Pros: Simple, efficient, and straightforward.
	* Cons: Might be slower due to method call overhead.
2. **Using `document.getElementById()` to access the element (GetById)**:
	* Pros: Can be faster since it uses a cached DOM lookup.
	* Cons: Requires an extra function call, which might add overhead.
3. **Using a custom wrapper function (`$`) (Wrapper)**:
	* Pros: Simplifies code and reduces cognitive load, as the reader doesn't need to know the DOM API.
	* Cons: Introduces additional overhead due to the custom function call.
4. **Directly accessing the global variable's property (Global Var)**:
	* Pros: Might be faster since it avoids an extra function call or lookup.
	* Cons: Is less readable and maintainable, as it relies on a global variable.

**Library**

None of these options use external libraries.

**Special JS Feature/Syntax**

There is no special JavaScript feature or syntax used in this benchmark. However, the custom wrapper function `$` defined in the Script Preparation Code uses a shorthand notation that might be unfamiliar to some developers (although it's equivalent to `function getEl(id) { return document.getElementById(id); }`).

Related benchmarks:

getElementById vs id vs wrapper vs global var toggling class (version: 0)

Comparing performance of: id vs getElementById vs wrapper vs global var

Created: 2 years ago by: Guest

Jump to the latest result

id

getElementById

wrapper

global var

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