Benchmark: XHR vs fetch vs axios vs superagent

HTML Preparation code:

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

AخA
 
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/superagent"></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); 

superagent
superagent.get('https://www.googleapis.com/discovery/v1/apis') .then(res => { console.log(res.body); });
superagent.get('https://www.googleapis.com/discovery/v1/apis')
.then(res => {
console.log(res.body);
});

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
superagent

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
xhr	13149.5 Ops/sec
fetch	11557.9 Ops/sec
axios	8378.0 Ops/sec
superagent	12041.6 Ops/sec

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

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

Overview

The provided benchmark tests four different methods for making HTTP requests to retrieve data from an API endpoint: XMLHttpRequest (XHR), fetch, axios, and superagent. The goal is to compare their performance in terms of execution speed and number of executions per second.

Options Compared

XMLHttpRequest (XHR): A built-in JavaScript API for making HTTP requests.
fetch: A modern JavaScript API introduced in 2015 for making HTTP requests.
axios: A popular third-party library for making HTTP requests, known for its simplicity and ease of use.
superagent: Another popular third-party library for making HTTP requests, designed to be simple and easy to use.

Pros and Cons

XMLHttpRequest (XHR):
- Pros: Native JavaScript API, no additional dependencies required.
- Cons: Outdated syntax, less efficient than modern alternatives.
fetch:
- Pros: Modern JavaScript API, widely adopted and well-supported.
- Cons: Requires a modern browser with support for HTTP/2.
axios:
- Pros: Simple and easy to use, popular among developers.
- Cons: Adds an additional dependency (library) to the project.
superagent:
- Pros: Similar to axios in terms of simplicity and ease of use.
- Cons: Also adds an additional dependency (library) to the project.

Library Descriptions

axios: A promise-based HTTP client for JavaScript. It allows you to send HTTP requests, including GET, POST, PUT, DELETE, and more. Axios also supports JSON data encoding and decoding, request headers, query parameters, and more.
superagent: A simpler and more lightweight alternative to axios. It uses the native XMLHttpRequest API under the hood but provides a higher-level interface for making HTTP requests.

Special JS Features or Syntax

None mentioned in this benchmark.

Alternative Approaches

Native Node.js APIs: If you're building a server-side application, you could use native Node.js APIs like http or https to make HTTP requests.
Other libraries: There are other popular libraries for making HTTP requests in JavaScript, such as jQuery-Ajax, requestAnimationFrame-based approaches, and more.

Benchmark Preparation Code

The provided HTML code includes the necessary scripts for axios and superagent to be executed:

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

This ensures that both libraries are loaded and available for use in the benchmark test cases.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Overview**

**Options Compared**

1. **XMLHttpRequest (XHR)**: A built-in JavaScript API for making HTTP requests.
2. **fetch**: A modern JavaScript API introduced in 2015 for making HTTP requests.
3. **axios**: A popular third-party library for making HTTP requests, known for its simplicity and ease of use.
4. **superagent**: Another popular third-party library for making HTTP requests, designed to be simple and easy to use.

**Pros and Cons**

1. **XMLHttpRequest (XHR)**:
	* Pros: Native JavaScript API, no additional dependencies required.
	* Cons: Outdated syntax, less efficient than modern alternatives.
2. **fetch**:
	* Pros: Modern JavaScript API, widely adopted and well-supported.
	* Cons: Requires a modern browser with support for HTTP/2.
3. **axios**:
	* Pros: Simple and easy to use, popular among developers.
	* Cons: Adds an additional dependency (library) to the project.
4. **superagent**:
	* Pros: Similar to axios in terms of simplicity and ease of use.
	* Cons: Also adds an additional dependency (library) to the project.

**Library Descriptions**

1. **axios**: A promise-based HTTP client for JavaScript. It allows you to send HTTP requests, including GET, POST, PUT, DELETE, and more. Axios also supports JSON data encoding and decoding, request headers, query parameters, and more.
2. **superagent**: A simpler and more lightweight alternative to axios. It uses the native XMLHttpRequest API under the hood but provides a higher-level interface for making HTTP requests.

**Special JS Features or Syntax**

None mentioned in this benchmark.

**Alternative Approaches**

1. **Native Node.js APIs**: If you're building a server-side application, you could use native Node.js APIs like http or https to make HTTP requests.
2. **Other libraries**: There are other popular libraries for making HTTP requests in JavaScript, such as jQuery-Ajax, requestAnimationFrame-based approaches, and more.

**Benchmark Preparation Code**

The provided HTML code includes the necessary scripts for axios and superagent to be executed:
```html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/superagent"></script>
```
This ensures that both libraries are loaded and available for use in the benchmark test cases.

Related benchmarks:

XHR vs fetch vs axios vs superagent (version: 0)

Comparing performance of: xhr vs fetch vs axios vs superagent

Created: one year ago by: Registered User

Jump to the latest result

xhr

fetch