Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
XHR vs fetch without JSON parsing
(version: 0)
Benchmark.js
Comparing performance of:
xhr vs fetch
Created:
2 years ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
xhr
fetch
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0
Browser/OS:
Firefox 152 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=633208" width="100%" height="500px"></iframe>
xhr
10K/s
fetch
9K/s
View exact numbers
Test name
Executions per second
✓
xhr
10,112 Ops/sec
fetch
9,027 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
Lodash cloneDeep vs structuredClone vs JSON Parse (Big Object)
Lodash cloneDeep vs structuredClone vs JSON.parse + JSON.stringify but with big data
Comments
Confirm delete:
Do you really want to delete benchmark?