Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
xhr vs fetch send
(version: 0)
Comparing performance of:
xhr vs fetch
Created:
5 years ago
by:
Guest
Jump to the latest result
Tests:
xhr
const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.googleapis.com/discovery/v1/apis'); xhr.send();
fetch
fetch('https://www.googleapis.com/discovery/v1/apis')
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:
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):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net. **Benchmark Definition** The benchmark definition is the core of every test case, defining what is being measured and compared. In this case, we have two simple benchmark definitions: 1. `const xhr = new XMLHttpRequest();\r\nxhr.open('GET', 'https://www.googleapis.com/discovery/v1/apis');\r\nxhr.send();` 2. `fetch('https://www.googleapis.com/discovery/v1/apis')` These two definitions represent the two approaches being compared: XHR (XMLHttpRequest) and Fetch API. **What is being tested?** The benchmark is measuring the performance difference between using the XHR approach to make a GET request and using the Fetch API. Specifically, it's testing how many requests can be sent per second in both cases. **Options being compared** We have two options: 1. **XHR (XMLHttpRequest)**: A traditional JavaScript API for making HTTP requests. 2. **Fetch API**: A modern JavaScript API introduced in 2015 for making HTTP requests. **Pros and Cons of each approach** **XHR (XMLHttpRequest) Pros:** * Wide browser support * Can be used for more complex HTTP requests (e.g., POST, PUT, DELETE) * Allows for setting request headers, body, and other options **XHR (XMLHttpRequest) Cons:** * Can be slower due to the overhead of creating a new XMLHttpRequest object and handling event listeners * Requires manual error handling and event listener setup **Fetch API Pros:** * Modern, efficient, and easier to use than XHR * Supports canceling requests * Reduces boilerplate code compared to XHR **Fetch API Cons:** * Smaller browser support (although improving) * Limited control over request options and headers **Other considerations** When choosing between XHR and Fetch API, consider the trade-off between flexibility, performance, and simplicity. If you need more complex HTTP requests or want a more modern API with better performance, Fetch might be the better choice. However, if you're targeting older browsers or prefer a more traditional approach, XHR is still a viable option. **Library/Feature being used** There isn't a specific library mentioned in the benchmark definition, but both XHR and Fetch API are built-in JavaScript APIs. The Fetch API is supported by modern browsers, while XHR is supported by most browsers (although some may require polyfills). **Special JS feature/syntax** This benchmark doesn't use any special JavaScript features or syntax beyond the standard ES6/ES7 syntax. Now that we've explored the benchmark, let's take a look at some other alternatives for making HTTP requests in JavaScript: 1. **AJAX**: A popular technique using XHR to make asynchronous requests. 2. ** Axios**: A third-party library providing an even simpler API for making HTTP requests. 3. **jQuery AJAX**: Another third-party library that wraps XHR and Fetch API APIs. Keep in mind that these alternatives may introduce additional dependencies or performance overhead, but can simplify the code and provide more features beyond basic HTTP request handling.
Related benchmarks:
Native XHR vs Fetch (async/await - try/catch)
XHR vs fetch - wolf.bet
XHR vs fetch without JSON parsing
XHR (responseType: json) vs fetch
Comments
Confirm delete:
Do you really want to delete benchmark?