Benchmark: DOM selectors vs localStorag vs /sessionStorage

HTML Preparation code:

<html>
  <head>
    
	<meta name="promotions" content="ONEPROMO,TWOPROMO">
	<meta name="promos" id="promos" content="ONEPROMO,TWOPROMO">
      
  </head>
  <body>
    <!-- DUMMY HTML TO INCREASE NODES -->
    <h1>HTML Ipsum Presents</h1>

    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

    <h2>Header Level 2</h2>

    <ol>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
    </ol>

    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

    <h3>Header Level 3</h3>

    <ul>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
    </ul>

    <pre><code>
    #header h1 a {
      display: block;
      width: 300px;
      height: 80px;
    }
    </code></pre>
    <ul>
       <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
       <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
       <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
       <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
    </ul>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

  </body>
</html>

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:

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.

Based on the provided benchmark result data, I will provide some general insights and observations.

**Benchmark Results:**

The benchmark results are for four different test cases:

1. `document.getElementById`
2. `document.querySelector`
3. `sessionStorage`
4. `localStorage`

**Observations:**

* The browser is Chrome 78, which is a relatively modern version of the browser.
* The device platform is Desktop, and the operating system is Windows 7. This suggests that the benchmark was run on an older system.
* The executions per second (EPS) values vary significantly across different test cases, indicating that the performance differences are substantial.
* `document.getElementById` has a relatively high EPS of 3642618.0, which suggests that it is one of the fastest test cases.

**Insights:**

Based on the provided data, here are some general insights:

* The performance difference between `document.getElementById` and `document.querySelector` is significant, with `document.getElementById` being approximately 2-3 times faster.
* `sessionStorage` and `localStorage` have similar EPS values, indicating that they perform similarly in terms of speed.
* The performance differences between the different test cases suggest that there may be some underlying issues or optimization opportunities for each benchmark.

**Next Steps:**

To further investigate these findings, I would recommend:

1. Analyzing the specific HTML and JavaScript code used in the benchmark to identify potential performance bottlenecks.
2. Running additional benchmarks with different input data or scenarios to validate the observed performance differences.
3. Investigating optimization opportunities for each benchmark test case.

Let me know if you'd like me to elaborate on any of these points!

Related benchmarks:

DOM selectors vs localStorag vs /sessionStorage (version: 0)

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

Created: 6 years ago by: Registered User

Jump to the latest result

document.getElementById

document.querySelector

sessionStorage

localStorage

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