Benchmark: test xhr vs API fetch

Tests:

xhr
const xhr = new XMLHttpRequest(); xhr.open('POST', 'https://www.googleapis.com/discovery/v1/apis'); xhr.onload = () => console.log(xhr.responseText); xhr.send();
api fetch
async function ajoutTravaux() { const reponse = await fetch("https://www.googleapis.com/discovery/v1/apis",{method: 'POST'}); if (reponse.ok){ const text = await response.text(); console.log(text); } } ajoutTravaux();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
xhr
api fetch

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

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

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
xhr	5752.5 Ops/sec
api fetch	5733.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is being tested in this benchmark.

**Overview**

The benchmark compares the performance of two approaches to make an HTTP request: using the `XMLHttpRequest` object (XHR) and using the `fetch` API.

**Options Compared**

Two options are being compared:

1. **XHR**: The XHR object is a built-in JavaScript object that allows you to send HTTP requests from the browser.
2. **Fetch API**: The Fetch API is a modern, Promise-based way of making HTTP requests in JavaScript. It provides a simpler and more efficient alternative to XHR.

**Pros and Cons**

Here are some pros and cons of each approach:

**XHR**

Pros:

* Wide support across browsers (including older ones)
* Can be used for both synchronous and asynchronous requests
* Allows for more control over the request, such as setting headers and query parameters

Cons:

* Can be verbose and require more code to set up
* Not as efficient as Fetch API in terms of overhead and performance

**Fetch API**

Pros:

* Simpler and more concise syntax
* More efficient than XHR in terms of overhead and performance
* Supports modern features like caching, headers, and query parameters out of the box

Cons:

* Limited support across older browsers (some still require polyfills)
* Less control over the request compared to XHR

**Library/Functionality Used**

In this benchmark, neither `XMLHttpRequest` nor the Fetch API is a library in the classical sense. They are both built-in JavaScript objects that allow you to make HTTP requests.

However, it's worth noting that the Fetch API does build upon some of the functionality provided by XHR, so there's an implicit connection between the two.

**Special JS Feature/Syntax**

In this benchmark, no special JavaScript features or syntax are being tested. The code is relatively straightforward and only demonstrates basic usage of XHR and the Fetch API.

If you're interested in testing other aspects of JavaScript performance, such as async/await, Web Workers, or some specific library functionality, please let me know and I can try to help with that!

Related benchmarks:

test xhr vs API fetch (version: 2)

xhr VS API fetch

Comparing performance of: xhr vs api fetch

Created: 10 months ago by: Registered User

Jump to the latest result

xhr

api fetch

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