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

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

document.getElementById

28.1M/s

document.querySelector

7.1M/s

localStorage

5.8M/s

sessionStorage

5.6M/s

Fastest: document.getElementById (5.1x faster)

View exact numbers

✓ document.getElementById: 28,053,196 ops/sec
• document.querySelector: 7,071,818 ops/sec
• localStorage: 5,804,313 ops/sec
• sessionStorage: 5,550,960 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
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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

document.getElementById

47.9M/s

sessionStorage

9.4M/s

localStorage

9.2M/s

document.querySelector

8.1M/s

View exact numbers

Test name	Executions per second
✓ document.getElementById	47,917,288 Ops/sec
sessionStorage	9,354,036 Ops/sec
localStorage	9,198,519 Ops/sec
document.querySelector	8,067,049 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 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.

DOM selectors vs localStorage/sessionStorage (version: 0) Benchmark.js

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

Created: 6 years ago by: Guest

Go to the latest result

document.getElementById

document.querySelector

sessionStorage

localStorage

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

DOM selectors vs localStorage/sessionStorage (version: 0) Benchmark.js

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

Created: 6 years ago by: Guest

Go to the latest result

document.getElementById

document.querySelector

sessionStorage

localStorage

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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: `document.getElementById vs document.querySelector vs sessionStorage vs localStorage`