Benchmark: 2023 - xhr vs fetch

Script Preparation code:

async function doAjax1() 
		{
			try 
			{
				const res = await fetch('https://www.googleapis.com/discovery/v1/apis');
				const data = await res.json();
				console.log(data);
			} 
			catch (error) 
			{
				console.log('Error:' + error);
			}
		}

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();
fetch
doAjax1();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
xhr
fetch

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	18295.0 Ops/sec
fetch	16096.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what's being tested.

**Benchmark Overview**

The provided benchmark measures the performance of two different methods for making HTTP requests: `XMLHttpRequest` (XHR) and the Fetch API.

**Benchmark Definition**

The first section, "Script Preparation Code", defines a function called `doAjax1()` that makes an AJAX request using the Fetch API. The second section, "Html Preparation Code", is empty, indicating that no specific HTML code is required for this benchmark.

**Test Cases**

There are two test cases:

1. **XHR**: This test case uses the traditional `XMLHttpRequest` object to make a GET request to `https://www.googleapis.com/discovery/v1/apis/`. The `onload` event handler is set to log the response data to the console using `JSON.parse(xhr.responseText)`.
2. **Fetch**: This test case calls the `doAjax1()` function, which makes an AJAX request using the Fetch API.

**Library: Fetch**

The `fetch()` function and its associated methods (e.g., `json()`) are used in both test cases to make the HTTP requests. The Fetch API is a modern, JavaScript-based alternative to XHR, introduced in modern browsers.

**Pros and Cons of Different Approaches**

Here's a brief summary:

* **XHR**: This method has been around for a long time and is widely supported by older browsers. However, it can be more verbose and error-prone compared to the Fetch API.
	+ Pros: Wide browser support, relatively simple to use.
	+ Cons: Can be less efficient, more verbose.
* **Fetch**: This method is modern, efficient, and easier to use than XHR. However, it may not work in older browsers or require additional polyfills.
	+ Pros: More efficient, easier to use, modern features like async/await support.
	+ Cons: May not work in older browsers, requires polyfills.

**Other Considerations**

* **Async/Await**: The `doAjax1()` function uses the `async` and `await` keywords, which allow for cleaner, more readable code. This syntax is also supported by modern browsers and is a good practice.
* **Error Handling**: Both test cases handle errors using try-catch blocks, which is good practice to prevent crashes and provide useful error messages.

**Other Alternatives**

If you need to support older browsers or want to explore alternative approaches, consider the following:

* **Axios**: A popular JavaScript library for making HTTP requests that provides a more modern API than XHR.
* **jQuery.ajax()**: A jQuery-specific function for making AJAX requests that can be used in conjunction with XHR.

Overall, the Fetch API is a good choice for modern web development due to its efficiency and ease of use. However, considering older browser support or specific requirements may require additional considerations.

Related benchmarks:

2023 - xhr vs fetch (version: 0)

Comparing performance of: xhr vs fetch

Created: 2 years ago by: Guest

Jump to the latest result

xhr

fetch

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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