Benchmark: getElementById vs HTML5 global variable based on id value

HTML Preparation code:

<table id="testTable">
</table>

Script Preparation code:

// some elemens without id
for(var i=0; i<5000; ++i)
  testTable.insertRow(-1).insertCell(-1).textContent = 'Row #'+i;

// some elements with id
var parent = testTable.parentElement;
for(var i=0; i<5000; ++i)
{
  var div = document.createElement('div');
  div.id = 'divBefore'+i;
  parent.insertBefore(div, testTable);
  
  div = document.createElement('div');
  div.id = 'divAfter'+i;
  parent.appendChild(div);
}

Tests:

getElementById each time
for(var i=0; i<10000; ++i) { var table = document.getElementById('testTable'); table.rows[0].cells[0].textContent = 'Test'; }
Own global variable
var table = document.getElementById('testTable'); for(var i=0; i<10000; ++i) { table.rows[0].cells[0].textContent = 'Test'; }
Own global variable with equal name
var testTable = document.getElementById('testTable'); for(var i=0; i<10000; ++i) { testTable.rows[0].cells[0].textContent = 'Test'; }
HTML5 global variable based on id value
for(var i=0; i<10000; ++i) { testTable.rows[0].cells[0].textContent = 'Test'; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById each time
Own global variable
Own global variable with equal name
HTML5 global variable based on id value

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark analysis.

**Benchmark Definition JSON**

The provided JSON represents a benchmark that compares four different approaches to accessing an HTML element by its ID:

1. `getElementById` each time: Accessing the element using the `document.getElementById()` method repeatedly.
2. Own global variable: Storing the element in a local variable and reusing it throughout the test.
3. Own global variable with equal name: Storing the element in a local variable with the same name as the original `getElementById` call, effectively reusing the cached result.
4. HTML5 global variable based on id value: Accessing the element using the `window.` namespace with the ID as a property.

**Options Compared**

The benchmark compares the performance of these four approaches to accessing an HTML element by its ID:

* Repeatedly accessing the element using `document.getElementById()`
* Storing the element in a local variable and reusing it
* Storing the element in a local variable with the same name as the original `getElementById` call, effectively reusing the cached result
* Using the HTML5 global variable based on id value

**Pros and Cons**

1. **Own global variable**: This approach can be faster since it avoids repeated DOM queries. However, if the element is removed or updated during the test, this caching will not work as expected.
2. **Own global variable with equal name**: Similar to the previous approach, but with a higher chance of success due to the shared scope. Still, the cache might become outdated if the original element changes.
3. **`getElementById` each time**: This is the most straightforward approach, but it incurs repeated DOM queries, which can be slower and more resource-intensive.
4. **HTML5 global variable based on id value**: This method uses a pre-defined namespace (`window.`) to access the element, making it faster since there's no repeated query overhead.

**Library**

In this benchmark, the library is not explicitly mentioned. However, the usage of `document` and the DOM methods like `getElementById`, `insertRow`, and `appendChild` suggests that the test relies on the browser's native API for manipulating HTML elements.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes used in this benchmark beyond the standard language. The focus is solely on comparing different approaches to accessing an element by its ID.

**Alternatives**

Other alternatives to these approaches could include:

* Using a library like jQuery, which provides its own method for accessing elements by ID (e.g., `$('#testTable')`).
* Implementing a custom caching mechanism or cache eviction policy.
* Optimizing the test code using techniques like parallel execution or concurrent programming.

Keep in mind that this benchmark is designed to compare specific approaches to accessing an element by its ID, so these alternatives might not be relevant to the actual use case.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Browser/OS: Chrome 110 on Linux

View result in a separate tab

Test name	Executions per second
getElementById each time	175.3 Ops/sec
Own global variable	363.3 Ops/sec
Own global variable with equal name	347.1 Ops/sec
HTML5 global variable based on id value	86.3 Ops/sec

Related benchmarks:

getElementById vs HTML5 global variable based on id value (version: 0)

https://html.spec.whatwg.org/#named-access-on-the-window-object

Comparing performance of: getElementById each time vs Own global variable vs Own global variable with equal name vs HTML5 global variable based on id value

Created: 8 years ago by: Guest

Jump to the latest result

getElementById each time

Own global variable

Own global variable with equal name

HTML5 global variable based on id value

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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