Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
XHR (responseType: json) vs fetch
(version: 0)
Benchmark.js
Comparing performance of:
xhr vs fetch
Created:
2 years ago
by:
Guest
Go to the latest result
Tests:
xhr
const xhr = new XMLHttpRequest(); xhr.responseType = 'json'; xhr.open('GET', 'https://www.googleapis.com/discovery/v1/apis'); xhr.onload = () => console.log(JSON.parse(xhr.response)); xhr.send();
fetch
fetch('https://www.googleapis.com/discovery/v1/apis').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:
11 months ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36
Browser/OS:
Chrome 140 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=618544" width="100%" height="500px"></iframe>
fetch
6K/s
xhr
5K/s
View exact numbers
Test name
Executions per second
✓
fetch
5,942 Ops/sec
xhr
4,544 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'd be happy to explain the benchmark. **What is being tested?** The provided JSON represents a JavaScript microbenchmark that compares the performance of two APIs: `XMLHttpRequest` (XHR) with the `responseType` set to `'json'`, and the Fetch API. The benchmark measures how many requests each API can make per second. **Options compared** There are two options being compared: 1. **XMLHttpRequest**: This is a traditional JavaScript API for making HTTP requests. It's been around since the early days of web development. 2. **Fetch API**: Introduced in 2015, this is a modern replacement for XHR. Fetch is simpler to use and provides more features than XHR. **Pros and cons of each approach** **XMLHttpRequest (XHR)** Pros: * More fine-grained control over the request * Can be used on older browsers that don't support Fetch * Has been around longer, so there's a larger community of developers familiar with it Cons: * Requires more boilerplate code to set up and send requests * Less efficient than Fetch in terms of memory usage **Fetch API** Pros: * Easier to use than XHR, with less boilerplate code required * More flexible and powerful than XHR, allowing for features like canceling requests and checking response headers * More modern and actively maintained than XHR Cons: * Less familiar to older developers who aren't accustomed to its syntax * May have performance overhead due to the additional features it provides **Library** In this benchmark, neither library is being used as a separate entity (i.e., there's no third-party library being tested). However, if you were to use a library like Axios or Promise-based Fetch, those would be alternative approaches to making HTTP requests. **Special JS feature or syntax** This benchmark doesn't rely on any special JavaScript features or syntax that are specific to modern browsers. The only "special" thing here is the `responseType` parameter in XHR, which allows for parsing JSON responses more efficiently. **Other alternatives** If you wanted to make HTTP requests using a different API, some alternatives might include: * `window.XDomainRequest`: A cross-domain request API that's similar to XHR but specifically designed for same-origin policy compliance. * `activeRequest` and `sendRequest`: Asynchronous APIs introduced in ECMAScript 2015 (ES6) for making HTTP requests. * `node-fetch` or other third-party libraries for making Fetch-like requests on the server-side (e.g., using Node.js). Overall, this benchmark provides a useful comparison between two popular JavaScript APIs for making HTTP requests.
Related benchmarks
Lodash cloneDeep vs structuredClone vs JSON-JSON
Lodash cloneDeep vs structuredClone vs JSON.parse + JSON.stringify but with big data
Comments
Confirm delete:
Do you really want to delete benchmark?