Benchmark: XHR vs fetch without JSON parsing

Tests:

xhr
const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.googleapis.com/discovery/v1/apis'); xhr.onload = () => console.log(xhr.responseText); xhr.send();
fetch
fetch('https://www.googleapis.com/discovery/v1/apis').then(response => response.text()).then(console.log)

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: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0

Browser/OS: Firefox 131 on Windows

View result in a separate tab

Test name	Executions per second
xhr	1627.0 Ops/sec
fetch	1417.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.

**What is being tested?**

The provided benchmark tests two approaches to making HTTP requests: `XMLHttpRequest` (XHR) and `fetch`. The goal is to compare the performance of these two methods in terms of execution speed, without parsing the JSON response.

**Options compared**

The two options being compared are:

1. **XMLHttpRequest (XHR)**: This is a traditional, low-level API for making HTTP requests in JavaScript. It involves creating an instance of `XMLHttpRequest`, setting the request method and URL, and handling the response.
2. **fetch**: This is a modern, high-level API for making HTTP requests in JavaScript. It's designed to be simpler and more intuitive than XHR, with a more concise syntax.

**Pros and cons**

Here are some pros and cons of each approach:

**XHR (XMLHttpRequest)**

Pros:

* More control over the request process
* Can handle complex scenarios like multipart/form-data requests
* Works in older browsers that don't support `fetch`

Cons:

* Requires more boilerplate code
* Can be slower due to the need for manual error handling and response parsing

**Fetch**

Pros:

* Simplified syntax makes it easier to read and write
* Automatic error handling and response parsing reduce code complexity
* Works in modern browsers with native support for `fetch`

Cons:

* Less control over the request process compared to XHR
* May not work in older browsers without polyfills or workarounds

**Library usage**

In this benchmark, neither XHR nor `fetch` uses a separate library. They are built-in JavaScript APIs.

**Special JS feature or syntax**

None of the two approaches use special JavaScript features or syntax that would require additional explanation.

**Other considerations**

When choosing between XHR and `fetch`, consider the following factors:

* Complexity of your request: If you need to handle complex scenarios, XHR might be a better choice. For simple requests, `fetch` is likely sufficient.
* Browser support: If you need to support older browsers, XHR might be a better option.
* Readability and maintainability: If code readability is important, `fetch` is generally considered easier to read and write.

**Alternatives**

If you're interested in exploring other approaches, here are some alternatives:

1. **Axios**: A popular library for making HTTP requests that provides a more concise syntax than XHR.
2. **AJAX libraries**: Other libraries like jQuery or Lodash might be used to make HTTP requests, but they may introduce additional overhead or complexity compared to `fetch`.
3. **Native Web Workers**: If performance is critical, you might consider using native Web Workers to offload request processing from the main thread.

In summary, this benchmark provides a fair comparison between XHR and `fetch`, highlighting their strengths and weaknesses in terms of execution speed and ease of use. By understanding the pros and cons of each approach, developers can choose the best fit for their specific needs.

Related benchmarks:

XHR vs fetch without JSON parsing (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):