Benchmark: XHR (responseType: json) vs fetch

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>

Previous results

Test case name	Result
xhr
fetch

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows

View result in a separate tab

Test name	Executions per second
xhr	7747.5 Ops/sec
fetch	5546.5 Ops/sec

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

LLMs can make mistakes. Check important info.

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:

XHR (responseType: json) vs fetch (version: 0)

Comparing performance of: xhr vs fetch

Created: 8 months ago by: Guest

Jump to the latest result

xhr

fetch

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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