Benchmark: XHR vs fetch vs axios (no log)

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 = () => JSON.parse(xhr.responseText); xhr.send();
fetch
fetch('https://www.googleapis.com/discovery/v1/apis') .then(response => response.json());
axios
axios.get('https://www.googleapis.com/discovery/v1/apis') .then((response) => response.json());

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 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	12596.5 Ops/sec
fetch	11398.0 Ops/sec
axios	8784.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark compares three different approaches to make an HTTP GET request: XMLHttpRequest (XHR), fetch, and Axios. The goal is to determine which approach is the fastest.

**Options Compared**

* **XMLHttpRequest**: A built-in JavaScript object that allows you to send HTTP requests.
* **fetch**: A modern API introduced in ECMAScript 2015 (ES6) for making HTTP requests.
* **Axios**: A popular third-party library that provides a simple and intuitive way to make HTTP requests.

**Pros and Cons**

* **XMLHttpRequest**:
	+ Pros: Built-in, no additional dependencies required. However, it's an older API with limited features compared to fetch and Axios.
	+ Cons: Less efficient, more verbose code, and not as convenient to use as fetch or Axios.
* **fetch**:
	+ Pros: Modern API, easy to use, and provides a promise-based interface for handling responses. However, it requires modern browsers (ES6+) and may not work in older browsers.
	+ Cons: May not be suitable for older browsers or environments that don't support ES6+, and has limited customization options compared to Axios.
* **Axios**:
	+ Pros: Flexible, feature-rich, and widely used library. Provides a lot of configuration options and can handle complex requests. However, it requires additional dependencies (npm package) and may have a steeper learning curve.
	+ Cons: Requires additional setup and may not be suitable for environments where Axios is not installed.

**Library Used**

* **Axios**: A popular third-party library that provides a simple and intuitive way to make HTTP requests. It's widely used in web applications due to its flexibility, feature-richness, and ease of use.

**Special JS Feature/Syntax**

None mentioned in the provided benchmark. However, it's worth noting that fetch uses modern JavaScript features like async/await, which are supported by most modern browsers but may not work in older environments.

**Other Alternatives**

* **jQuery.ajax()**: A jQuery-specific API for making HTTP requests. While it provides some benefits over XHR and fetch (e.g., automatic data type conversion), it's less efficient and more verbose.
* **XMLHttpRequest with promises**: You can use the XMLHttpRequest object with promises to make asynchronous requests, but this approach requires additional setup and may not be as convenient as using fetch or Axios.

**Benchmark Preparation**

The provided benchmark preparation code includes a script tag that loads the Axios library. This is necessary because the benchmark tests each request method individually, requiring them to have access to their respective libraries.

When preparing the benchmark, you would need to create separate scripts for each request method (XHR, fetch, and Axios) and configure the test environment accordingly. The `Script Preparation Code` field in the benchmark definition includes the Axios script tag.

Related benchmarks:

XHR vs fetch vs axios (no log) (version: 0)

Comparing performance of: xhr vs fetch vs axios

Created: 2 years ago by: Guest

Jump to the latest result

xhr

fetch

axios

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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