Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
XHR vs fetch - stake.com
(version: 0)
Benchmark.js
Comparing performance of:
xhr vs fetch
Created:
6 years ago
by:
Guest
Go to the latest result
Tests:
xhr
const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://forum.stake.com/active.php'); xhr.onload = () => console.log(JSON.parse(xhr.responseText)); xhr.send();
fetch
fetch('https://forum.stake.com/active.php').then(response => response.json()).then(console.log)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
xhr
fetch
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; rv:152.0) Gecko/20100101 Firefox/152.0
Browser/OS:
Firefox 152 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=633260" width="100%" height="500px"></iframe>
fetch
7K/s
xhr
6K/s
View exact numbers
Test name
Executions per second
✓
fetch
7,125 Ops/sec
xhr
6,407 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested in this JavaScript microbenchmark. **What is being tested?** The benchmark is comparing the performance of two approaches for making HTTP requests: `XMLHttpRequest` (XHR) and `fetch`. Both methods are used to make a GET request to the same URL (`https://forum.stake.com/active.php`). **Options compared:** 1. **XMLHttpRequest**: This is an older API in JavaScript that allows you to create an XHR object, open a connection, send data, and handle responses. 2. **fetch**: This is a modern API introduced in ECMAScript 2015 (ES6) that provides a simpler and more intuitive way of making HTTP requests. **Pros and Cons:** 1. **XMLHttpRequest**: * Pros: It's been around for longer, so some browsers may have better support. * Cons: It can be slower, more verbose, and less efficient than `fetch`. 2. **fetch**: * Pros: It's faster, more concise, and easier to use than XHR. * Cons: It requires modern browsers that support ES6+ features. **Library usage:** Neither of these methods relies on a library, but if we look at the `fetch` method in the benchmark definition, it's worth noting that `fetch` is a native API built into modern JavaScript engines. However, there are third-party libraries like Axios or SuperAgent that provide similar functionality to `fetch`. **Special JS feature or syntax:** There isn't any special JavaScript feature or syntax being used in this benchmark. Both XHR and `fetch` are standard APIs. **Other considerations:** When choosing between XHR and `fetch`, consider the following: * Browser support: If you need to support older browsers, use XHR. * Performance: If performance is critical, use `fetch`. * Code readability and maintainability: Use `fetch` for its concise and readable syntax. In this specific benchmark, using `fetch` seems to be faster than using XHR. The results show an average of 20,261.3365 executions per second for `fetch` compared to 17,444.2134 executions per second for XHR. **Other alternatives:** If you need to make HTTP requests, there are other alternatives like: * Axios (a popular third-party library) * SuperAgent (another third-party library) * jQuery.ajax (part of the jQuery framework) However, `fetch` is generally recommended as a first choice due to its simplicity and performance.
Related benchmarks
Native XHR vs Fetch (async/await - try/catch)
XHR vs fetch without JSON parsing
Comments
Confirm delete:
Do you really want to delete benchmark?