Benchmark: XHR vs fetch vs axios

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

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)
axios
axios.get('https://www.googleapis.com/discovery/v1/apis') .then((response) => response.json()) .then(console.log);

Historical Performance Data aggregated from 140 community runs

Desktop Results:

Chrome 94 runs

xhr

12K/s

fetch

11K/s

axios

8K/s

Fastest: xhr (1.6x faster)

View exact numbers

✓ xhr: 12,403 ops/sec
• fetch: 10,895 ops/sec
• axios: 7,754 ops/sec

Firefox 14 runs

xhr

7K/s

fetch

6K/s

axios

2K/s

Fastest: xhr (2.9x faster)

View exact numbers

✓ xhr: 6,726 ops/sec
• fetch: 5,501 ops/sec
• axios: 2,306 ops/sec

Other 9 runs

xhr

5K/s

fetch

2K/s

axios

2K/s

Fastest: xhr (2.1x faster)

View exact numbers

✓ xhr: 4,877 ops/sec
• fetch: 2,345 ops/sec
• axios: 2,270 ops/sec

Safari 6 runs

xhr

2K/s

axios

2K/s

fetch

2K/s

Fastest: xhr (1.1x faster)

View exact numbers

✓ xhr: 2,350 ops/sec
• axios: 2,180 ops/sec
• fetch: 2,125 ops/sec

Mobile Results:

Safari 11 runs

xhr

560/s

fetch

486/s

axios

482/s

Fastest: xhr (1.2x faster)

View exact numbers

✓ xhr: 560 ops/sec
• fetch: 486 ops/sec
• axios: 482 ops/sec

Chrome 6 runs

xhr

2K/s

fetch

1K/s

axios

881/s

Fastest: xhr (2.0x faster)

View exact numbers

✓ xhr: 1,764 ops/sec
• fetch: 1,470 ops/sec
• axios: 881 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
xhr
fetch
axios

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36

Browser/OS: Chrome 150 on Windows

View result in a separate tab

xhr

52K/s

fetch

48K/s

axios

17K/s

View exact numbers

Test name	Executions per second
✓ xhr	51,722 Ops/sec
fetch	47,909 Ops/sec
axios	16,571 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The benchmark compares the performance of three different methods: XHR (XMLHttpRequest), fetch, and axios. The goal is to determine which method is the fastest.

**What is tested**

Three individual test cases are defined:

1. **XHR**: A traditional XMLHttpRequest object is created, opened with a GET request to a Google API endpoint, and then sent. The response text is parsed as JSON when the request completes.
2. **Fetch**: The fetch API is used to send a GET request to the same Google API endpoint. The response data is parsed as JSON using the `response.json()` method and logged to the console.
3. **Axios**: The axios library is used to send a GET request to the Google API endpoint. The response data is parsed as JSON using the `response.data` property (not `response.json()`, which is why this might seem slightly different from fetch) and logged to the console.

**Options compared**

The three options are:

* **XHR**: Traditional, low-level HTTP request object.
* **Fetch**: A modern, API-first approach to making HTTP requests.
* **Axios**: A popular library that simplifies HTTP requests with a more fluent API.

**Pros and Cons of each option**

1. **XHR**:
	* Pros: Low-level control over the request process.
	* Cons: Can be error-prone, verbose, and harder to use than modern alternatives.
2. **Fetch**:
	* Pros: Easy to use, modern, and part of the Web API.
	* Cons: May not offer as much low-level control as XHR or axios.
3. **Axios**:
	* Pros: Simplifies HTTP requests with a fluent API, offers features like caching and error handling out of the box.
	* Cons: Adds an extra dependency to your project (the axios library), can be slower than native fetch due to the overhead of calling a function.

**Library usage**

The `axios` library is used in this benchmark. Axios is a popular JavaScript library that simplifies HTTP requests by providing a more intuitive API than traditional XHR or the fetch API. It also offers additional features like caching, error handling, and debugging tools.

**Special JS feature or syntax**

There are no special JavaScript features or syntax used in this benchmark. All three options rely on standard JavaScript and DOM APIs to make the HTTP requests.

**Other alternatives**

If you're looking for alternative methods to making HTTP requests, some popular options include:

* **Fetch API**: A modern, API-first approach to making HTTP requests that is part of the Web API.
* **XMLHttpRequest**: A traditional, low-level HTTP request object (as used in this benchmark).
* **JQuery**: A popular JavaScript library that includes features for making HTTP requests (although it's not as lightweight or modern as some other options).

Keep in mind that each option has its strengths and weaknesses, and the choice of which to use will depend on your specific needs and preferences.

XHR vs fetch vs axios (version: 0) Benchmark.js

Comparing performance of: `xhr vs fetch vs axios`

Created: 5 years ago by: Guest

Go to the latest result

xhr

fetch

axios

Historical Performance Data aggregated from 140 community runs

Desktop Results:

Chrome 94 runs

Firefox 14 runs

Other 9 runs

Safari 6 runs

Mobile Results:

Safari 11 runs

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

XHR vs fetch vs axios (version: 0) Benchmark.js

Comparing performance of: xhr vs fetch vs axios

Created: 5 years ago by: Guest

Go to the latest result

xhr

fetch

axios

Historical Performance Data aggregated from 140 community runs

Desktop Results:

Chrome 94 runs

Firefox 14 runs

Other 9 runs

Safari 6 runs

Mobile Results:

Safari 11 runs

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `xhr vs fetch vs axios`