Benchmark: XHR vs fetch vs axios

HTML Preparation code:

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

AخA
 
<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();

 
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)
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);

 
axios.get('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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
xhr
fetch
axios

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3.1 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
xhr	1261.1 Ops/sec
fetch	1206.6 Ops/sec
axios	1231.9 Ops/sec

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

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:

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.
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.
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

XHR:
- Pros: Low-level control over the request process.
- Cons: Can be error-prone, verbose, and harder to use than modern alternatives.
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.
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.

LLMs can make mistakes. Check important info.

**Overview**

**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.

Related benchmarks:

XHR vs fetch vs axios (version: 0)

Comparing performance of: xhr vs fetch vs axios

Created: 3 years ago by: Guest

Jump to the latest result

xhr

fetch