Benchmark: Native XHR vs Fetch (async/await - try/catch)

Script Preparation code:

function showResult(data) {
    //console.log(data);
}
var newUrl = "https://www.googleapis.com/discovery/v1/apis";

Tests:

Native XHR
try { var xhr = new XMLHttpRequest(); xhr.open("GET", newUrl, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { showResult(xhr); } } xhr.send(); } catch (error) { console.log(error); } finally { // done }
Native XHR (try/catch)
var xhr = new XMLHttpRequest(); xhr.open("GET", newUrl, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { showResult(xhr); } } xhr.send();
Fetch (promise)
var request = fetch(newUrl).then(showResult);
Fetch (async/await)
var testThis = async function() { var response = await fetch(newUrl); var data = await response.json(); return data; } testThis().then(function(data){ showResult(data); });
Fetch (async/await - try/catch)
var testThis = async function() { try { var response = await fetch(newUrl); var data = await response.json(); } catch (error) { console.log(error); } finally { return data; } } testThis().then(function(data){ showResult(data); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Native XHR
Native XHR (try/catch)
Fetch (promise)
Fetch (async/await)
Fetch (async/await - try/catch)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
Native XHR	11074.5 Ops/sec
Native XHR (try/catch)	12286.9 Ops/sec
Fetch (promise)	8743.1 Ops/sec
Fetch (async/await)	7389.7 Ops/sec
Fetch (async/await - try/catch)	8611.2 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Overview**

The benchmark compares four approaches to making an HTTP request: Native XHR (using XMLHttpRequest), Fetch with promise, Fetch with async/await, and Native XHR with try/catch. The goal is to determine which approach is the fastest.

**Options Compared**

1. **Native XHR**: Using the `XMLHttpRequest` object to make a GET request.
2. **Fetch with promise**: Using the `fetch` API with a promise to retrieve data from the server.
3. **Fetch with async/await**: Using the `fetch` API with async/await syntax to simplify the code and improve performance.

**Pros and Cons**

1. **Native XHR**:
	* Pros: Has been widely used for years, known for its reliability, and easy to understand.
	* Cons: Can be slower than modern alternatives due to its older design.
2. **Fetch with promise**:
	* Pros: Modern API, concise syntax, and efficient performance. However, it requires understanding promises and async code.
	* Cons: Can lead to callback hell if not managed properly, which can make the code harder to read.
3. **Fetch with async/await**:
	* Pros: Simplifies promise-based code, improves readability, and reduces errors.
	* Cons: Only supported in modern browsers (>= Chrome 60), which might affect compatibility.

**Library: Fetch**

The `fetch` API is a modern JavaScript library introduced in 2015. It simplifies making HTTP requests by providing a more intuitive and efficient way to interact with servers. The API consists of two main parts:

1. **Promise**: Returns a promise that resolves to the response data.
2. **Async/await syntax**: Allows for synchronous-like code using async functions, which can improve readability.

**Special JS Feature: Async/Await**

Async/await is a feature introduced in ECMAScript 2017 (ES7). It allows developers to write asynchronous code that looks and feels like synchronous code. This feature simplifies promise-based code and reduces errors by allowing for easier exception handling.

**Benchmark Result**

The benchmark result shows the number of executions per second for each test case, which indicates the speed at which the requests are made. The top three fastest results are:

1. **Fetch with async/await**: 8174.3921875
2. **Fetch (promise)**: 7786.9114765625
3. **Native XHR (try/catch)**: 7709.948046875

**Other Alternatives**

If you want to explore other options, here are a few alternatives:

1. **Axios**: A popular promise-based HTTP client library for Node.js.
2. **jQuery.ajax**: A popular JavaScript library that provides an easy-to-use API for making HTTP requests.

Keep in mind that each of these alternatives has its own strengths and weaknesses, and the best choice depends on your specific use case and requirements.

Related benchmarks:

Native XHR vs Fetch (async/await - try/catch) (version: 0)

XHR and Fetch benchmark with and without async/await and try/catch.

Comparing performance of: Native XHR vs Native XHR (try/catch) vs Fetch (promise) vs Fetch (async/await) vs Fetch (async/await - try/catch)

Created: 4 years ago by: Guest

Jump to the latest result

Native XHR

Native XHR (try/catch)

Fetch (promise)

Fetch (async/await)

Fetch (async/await - try/catch)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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