Benchmark: DOM selectors vs localStorage/sessionStorage

HTML Preparation code:

<meta name="promotions" content="ONEPROMO,TWOPROMO">
<meta name="promos" id="promos" content="ONEPROMO,TWOPROMO">

Script Preparation code:

sessionStorage.setItem('promos', 'ONEPROMO,TWOPROMO')
localStorage.setItem('promos', 'ONEPROMO,TWOPROMO')

Tests:

document.getElementById
var promos = document.getElementById('promos').content
document.querySelector
var promos = document.querySelector('meta[name=promotions]').content
sessionStorage
var promos = sessionStorage.getItem('promos')
localStorage
var promos = localStorage.getItem('promos')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
document.getElementById
document.querySelector
sessionStorage
localStorage

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
document.getElementById	28398334.0 Ops/sec
document.querySelector	6471355.0 Ops/sec
sessionStorage	4639065.0 Ops/sec
localStorage	4692437.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Overview**

The provided benchmark measures the performance of different methods to access data stored in the browser's local storage (`localStorage`) or session storage (`sessionStorage`). The tests also involve accessing DOM elements using `document.getElementById` and `document.querySelector`.

**Test Cases**

There are four test cases:

1. **`document.getElementById`**: This method uses the `id` attribute of a DOM element to access its content.
2. **`document.querySelector`**: This method uses a CSS selector to select a DOM element based on its tag name, class, or ID.
3. **`sessionStorage.getItem`**: This method retrieves a value from the session storage using a key.
4. **`localStorage.getItem`**: This method retrieves a value from the local storage using a key.

**Options Compared**

The test cases compare different methods to access the same data:

* `document.getElementById` vs `document.querySelector`: Both methods are used to access DOM elements, but `document.querySelector` is more flexible and can select multiple elements.
* `sessionStorage.getItem` vs `localStorage.getItem`: Both methods are used to retrieve values from local storage, but `localStorage` has a larger storage capacity.

**Pros and Cons**

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

1. **`document.getElementById`**:
	* Pros: Fast and efficient, uses less memory.
	* Cons: Limited flexibility, only works with elements that have an ID attribute.
2. **`document.querySelector`**:
	* Pros: More flexible, can select multiple elements using CSS selectors.
	* Cons: Slower than `document.getElementById`, uses more memory.
3. **`sessionStorage.getItem`**:
	* Pros: Fast and efficient, uses less memory.
	* Cons: Session storage is lost when the page is refreshed or the browser closes.
4. **`localStorage.getItem`**:
	* Pros: More flexible, can store larger amounts of data than session storage.
	* Cons: Slower than `sessionStorage.getItem`, uses more memory.

**Library and Purpose**

No libraries are used in this benchmark. However, if you were to modify the tests to use a library, some options could include:

* **`querySelectorAll`**: A method from the W3C DOM specification that returns a collection of elements that match a CSS selector.
* **` cheerio`**: A lightweight implementation of core jQuery designed specifically for the server.

**Special JS Features or Syntax**

None are mentioned in this benchmark.

**Other Alternatives**

If you wanted to test alternative methods, some options could include:

* Using `document.querySelector` with an attribute selector (e.g., `[data-promo]`) instead of an ID-based selector.
* Using a library like `lodash` to implement a custom method for accessing local storage or session storage.
* Testing the performance of different caching strategies, such as using ` cache-first` or `cache-last`.

Keep in mind that these alternatives would require significant changes to the benchmark and might not be relevant to the specific use case being tested.

Related benchmarks:

DOM selectors vs localStorage/sessionStorage (version: 0)

Comparing performance of: document.getElementById vs document.querySelector vs sessionStorage vs localStorage

Created: 5 years ago by: Guest

Jump to the latest result

document.getElementById

document.querySelector

sessionStorage

localStorage

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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