Benchmark: XHR vs fetch (HTML parsing, append)

HTML Preparation code:

<div id="container"></div>

Tests:

xhr
const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://en.wikipedia.org/wiki/Main_Page'); xhr.onload = () => document.getElementById('container').innerHTML += xhr.responseText; xhr.send();
fetch
fetch('https://en.wikipedia.org/wiki/Main_Page').then(response => response.text()).then(text => document.getElementById('container').innerHTML = text)

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition Overview**

The benchmark is designed to compare the performance of two approaches: `XMLHttpRequest` (XHR) and the modern JavaScript API `fetch`. The goal is to measure which approach is faster when making an HTTP request, parsing the response HTML, and appending it to a container element on the page.

**Options Compared**

There are two options being compared:

1. **XMLHttpRequest (XHR)**: This is a traditional, browser-based API for making HTTP requests. It's been around since the early days of web development.
2. **fetch**: This is a modern JavaScript API introduced in ECMAScript 2015 (ES6) for making HTTP requests. It's designed to be more efficient and easier to use than XHR.

**Pros and Cons**

* **XHR:**
	+ Pros:
		- Well-established, widely supported by older browsers.
		- Can be used for both synchronous and asynchronous requests.
	+ Cons:
		- Can be slower due to the need to manually handle request and response data.
		- More verbose code.
* **fetch:**
	+ Pros:
		- Faster and more efficient than XHR.
		- Easier to use, with a simpler syntax.
		- Supports modern features like promises and async/await.
	+ Cons:
		- Requires modern browsers (supporting ES6+).
		- May not work in older browsers.

**Library Usage**

Neither of the two options relies on any additional libraries. However, it's worth noting that `fetch` can use polyfills to provide fallback support for older browsers, if needed.

**Special JavaScript Features/Syntax**

This benchmark doesn't use any special JavaScript features or syntax. It's designed to be straightforward and easy to understand for a wide range of software engineers.

**Alternatives**

If you were to create an alternative benchmark, you could consider adding other modern APIs like:

* `axios`: A popular promise-based HTTP client library.
* `request-promise`: Another promise-based HTTP client library.
* `AbortController` for handling request aborts.

Alternatively, you could explore using more advanced benchmarking tools or frameworks, such as:

* **BenchmarkJS**: A lightweight, modern benchmarking framework for JavaScript.
* **jsperf**: An older but still widely used benchmarking tool for JavaScript.

Keep in mind that adding new alternatives might require significant changes to the benchmark definition and test cases.

Related benchmarks:

XHR vs fetch (HTML parsing, append) (version: 0)

Comparing performance of: xhr vs fetch

Created: 3 years ago by: Guest

Jump to the latest result

xhr

fetch

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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