Benchmark: XHR vs fetch vs axios to tronscan

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://apilist.tronscan.org/api/account?address=TWaSm8dnvTdJQ9hcpW3g8m4QEfJspcuDwA'); xhr.onload = () => console.log(JSON.parse(xhr.responseText)); xhr.send();
fetch
fetch('https://apilist.tronscan.org/api/account?address=TWaSm8dnvTdJQ9hcpW3g8m4QEfJspcuDwA') .then(response => response.json()) .then(console.log)
axios
axios.get('https://apilist.tronscan.org/api/account?address=TWaSm8dnvTdJQ9hcpW3g8m4QEfJspcuDwA') .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
axios

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/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
xhr	258033.2 Ops/sec
fetch	63989.0 Ops/sec
axios	42106.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmarking test case on the MeasureThat.net website. The benchmark compares the performance of three different approaches: XMLHttpRequest (XHR), Fetch API, and Axios to make a request to the Tronscan API.

**What is being tested?**

The test case is designed to measure the execution time of each approach in making a GET request to the specified URL. In this specific case, the request is to retrieve information about a Tron account.

**Options compared:**

1. **XMLHttpRequest (XHR)**: An older JavaScript API for making HTTP requests.
2. **Fetch API**: A newer JavaScript API introduced in ECMAScript 2015 for making HTTP requests.
3. **Axios**: A popular third-party library for making HTTP requests, built on top of the Fetch API.

**Pros and Cons of each approach:**

1. **XHR (XMLHttpRequest)**:
	* Pros: Well-established API, widely supported by older browsers.
	* Cons: Can be slower due to its older implementation and additional overhead for configuration.
2. **Fetch API**:
	* Pros: Modern and efficient, built into the browser's JavaScript engine, allows for easier cancellation of requests.
	* Cons: Requires modern browsers (>= Chrome 39, Firefox 33) to work.
3. **Axios**:
	* Pros: High-level abstraction over the Fetch API, built-in support for promises and async/await syntax, more extensive documentation and community support.
	* Cons: Adds an external library dependency, can be slower due to its additional overhead.

**Library usage**

In this benchmark, Axios is used as a third-party library to make HTTP requests. Axios provides a simpler and more efficient way of making requests compared to the Fetch API or XHR.

**Special JS features or syntax**

None are mentioned in this specific benchmark.

**Other considerations**

* MeasureThat.net provides various options for customizing benchmarks, such as adjusting the number of iterations, test environment, and browser settings.
* The benchmark results are displayed on a graph, allowing users to easily compare the performance of each approach.
* Users can also view detailed statistics about each test case, including execution time, number of executions per second, and more.

**Alternatives**

Other alternatives for making HTTP requests in JavaScript include:

1. **jQuery.ajax()**: A part of the jQuery library, providing a simple way to make AJAX requests.
2. **WinHttp.WinHttpRequest4**: An older API from Microsoft's Internet Explorer browser, not recommended due to its slow performance and limited features.

Keep in mind that these alternatives may have different performance characteristics compared to XHR, Fetch API, and Axios.

Related benchmarks:

XHR vs fetch vs axios to tronscan (version: 0)

Comparing performance of: xhr vs fetch vs axios

Created: 4 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):