Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Fetch cache (default) vs no cache (no-store)
(version: 0)
Benchmark.js
Comparing performance of:
Fetch (default) vs Fetch (no-store)
Created:
6 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="test"></div>
Tests:
Fetch (default)
fetch('https://jsonplaceholder.typicode.com/todos') .then((response) => { return response.json(); }) .then((data) => { console.log(data); });
Fetch (no-store)
fetch('https://jsonplaceholder.typicode.com/todos', { cache: 'no-store' }) .then((response) => { return response.json(); }) .then((data) => { console.log(data); });
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Fetch (default)
Fetch (no-store)
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
4 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
Browser/OS:
Chrome 148 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=629016" width="100%" height="500px"></iframe>
Fetch (default)
19K/s
Fetch (no-store)
18K/s
View exact numbers
Test name
Executions per second
✓
Fetch (default)
19,365 Ops/sec
Fetch (no-store)
17,765 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what's being tested. **Benchmark Overview** The benchmark is designed to compare two approaches for fetching data using the `fetch` API in JavaScript: 1. **Fetch with cache**: This approach allows the browser to store the response from the server, so that subsequent requests for the same resource can be served directly from the cache. 2. **Fetch without cache (no-store)**: This approach forces the browser to always revalidate the response from the server on every request, even if it's a repeat of a previous request. **Options Compared** The benchmark is comparing two options: * `cache`: a boolean flag that enables or disables caching for the fetch request. + Pros: - Can improve performance by reducing the number of requests to the server. - Can help with page loading times and reduce latency. + Cons: - May not be suitable for all use cases, such as APIs that require revalidation on every request. * `no-store`: a caching strategy that forces the browser to always revalidate the response from the server on every request. + Pros: - Ensures data consistency and accuracy by always revalidating the response from the server. + Cons: - May have performance implications due to increased number of requests to the server. **Library Used** In this benchmark, no specific libraries are used beyond the built-in `fetch` API and JavaScript's `console.log` function for logging data. **Special JS Feature or Syntax** There is no special JavaScript feature or syntax being tested in this benchmark. It's a straightforward comparison of two caching strategies using the `fetch` API. **Benchmark Preparation Code** The preparation code provided is minimal, consisting only of HTML and JavaScript code to fetch data from a JSONPlaceholder API: ```javascript fetch('https://jsonplaceholder.typicode.com/todos') .then((response) => response.json()) .then((data) => console.log(data)); ``` This code simply fetches the `/todos` endpoint, parses the response as JSON, and logs the data to the console. **Other Alternatives** If you want to explore alternative caching strategies or implementations, here are a few options: * **Cache-Control headers**: Instead of using the `cache` option in the `fetch` API, you can use Cache-Control headers on your server-side implementation. This allows for more fine-grained control over caching behavior. * **Local storage**: You can store cached responses locally using local storage or session storage. However, this approach may not be suitable for all use cases due to security and consistency concerns. * **CDN caching**: If you're serving static assets from a Content Delivery Network (CDN), you can leverage their caching capabilities to reduce the load on your server. Keep in mind that these alternatives may require additional setup and configuration, depending on your specific use case.
Related benchmarks
querySelector vs getElementById
Comments
Confirm delete:
Do you really want to delete benchmark?