Benchmark: XHR vs fetch - MeasureThat.net

Tests:

xhr
const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.googleapis.com/discovery/v1/apis'); xhr.onload = () => console.log(JSON.parse(xhr.responseText)); 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: 17 hours ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Linux

View result in a separate tab

Test name	Executions per second
xhr	7215.6 Ops/sec
fetch	6693.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and analyze what's being tested.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark comparing two approaches: making an XMLHttpRequest (XHR) request versus using the `fetch` API to retrieve data from a server. The benchmark aims to measure which approach is faster and more efficient for making HTTP requests.

**Options compared:**

1. **XHR (XMLHttpRequest)**: This is a built-in JavaScript object that allows you to send HTTP requests to a server.
2. **Fetch API**: Introduced in modern browsers, the Fetch API provides a simpler and more concise way to make HTTP requests.

**Pros and Cons of each approach:**

* **XHR:**
	+ Pros:
		- Widely supported across different browsers and versions.
		- Can be used for both GET and POST requests.
		- Allows for more control over request headers, body, etc.
	+ Cons:
		- Can be cumbersome to use due to the need to manually handle response data and error handling.
		- Requires a separate object creation and setup process.
* **Fetch API:**
	+ Pros:
		- Simplifies HTTP requests with a more concise syntax.
		- Allows for more modern features like async/await support.
		- Reduces the need to manually handle response data and error handling.
	+ Cons:
		- Less widely supported across older browsers (although it's still widely adopted).
		- Can be less flexible due to its simplicity.

**Library usage:**

In this benchmark, no libraries are explicitly used. The `fetch` API is a built-in feature of modern browsers, and XHR uses only the built-in `XMLHttpRequest` object.

**Special JavaScript features or syntax:**

There's one notable aspect in these test cases:

* **Async/await syntax**: Both test cases use async functions with `async/await`, which allows for more readable code and easier handling of promises.
* **Promises**: The `fetch` API returns a promise, and the XHR example uses a callback (`onload`) to handle the response data.

**Other alternatives:**

For making HTTP requests in JavaScript, other alternatives include:

1. **Axios**: A popular, lightweight library for making HTTP requests that provides more features than the Fetch API.
2. **jQuery.ajax()**: For using jQuery's AJAX capabilities, which can simplify the process of making HTTP requests.
3. **Polling or interval-based approaches**: Instead of using XHR or Fetch, you could use a polling mechanism to periodically check for updates from the server.

Keep in mind that these alternatives may have trade-offs in terms of performance, support, and ease of use compared to XHR and Fetch APIs.

Related benchmarks:

XHR vs fetch (version: 0)

Comparing performance of: xhr vs fetch

Created: 5 years 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 6 months ago):