Benchmark: XHR vs fetch - stake.com

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>

Previous results

Test case name	Result
xhr
fetch

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
xhr	18406.0 Ops/sec
fetch	16357.3 Ops/sec

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

LLMs can make mistakes. Check important info.

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:

XHR vs fetch - stake.com (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>

Fastest: N/A

Slowest: N/A

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