Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
xhr vs fetch perf
(version: 0)
Comparing performance of:
xhr vs fetch
Created:
4 years ago
by:
Guest
Jump to the latest result
Tests:
xhr
new Promise(resolve => { const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.googleapis.com/discovery/v1/apis'); xhr.onload = () => resolve(JSON.parse(xhr.responseText)); xhr.send(); }).then(console.log)
fetch
fetch('https://www.googleapis.com/discovery/v1/apis').then(response => response.json()).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:
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 break down the benchmark and explain what's being tested, compared, and the pros and cons of each approach. **What is being tested?** The benchmark is comparing two ways to make an HTTP request in JavaScript: using XMLHttpRequest (XHR) and the Fetch API. **Options being compared** There are two options being compared: 1. **XHR**: Using the XMLHttpRequest object to make a GET request to the Google Discovery API. 2. **Fetch API**: Using the Fetch API to make a GET request to the same Google Discovery API. **Pros and Cons of each approach:** ### XHR Pros: * Wide support across browsers, although older versions may have issues * Can be used for more complex requests (e.g., POST, PUT, DELETE) * Allows for manual handling of response headers, status codes, and errors Cons: * More verbose and error-prone compared to Fetch API * Requires creating an XMLHttpRequest object and setting up the request manually * May have performance issues due to overhead of the browser's network request handler ### Fetch API Pros: * Simplifies making HTTP requests by providing a single, consistent interface * Reduces boilerplate code and makes it easier to handle errors * Performance is often better than XHR due to optimized handling of network requests Cons: * Requires modern browsers (Chrome 37+, Firefox 28+, Edge 12+) to work effectively * Can be slower for very large requests or those with complex response headers **Library usage** In this benchmark, neither library is explicitly used. However, the Fetch API relies on browser-specific implementation and may require polyfills for older browsers. **Special JavaScript features or syntax** There are no special JavaScript features or syntax being tested in this benchmark. Both XHR and Fetch API use standard JavaScript syntax for making HTTP requests. **Other alternatives** Alternative methods for making HTTP requests include: * **Axios**: A popular, promise-based library that provides a simpler interface than the Fetch API. * **jQuery.ajax()**: A part of the jQuery library that provides a simple way to make AJAX requests, but may add unnecessary overhead due to its complexity. * **WebSockets**: A protocol for bidirectional communication between a web browser and a server, which can be used for real-time updates or interactive applications. In summary, this benchmark is testing the performance difference between using XMLHttpRequest (XHR) and the Fetch API in JavaScript. The Fetch API provides a simpler interface but may require modern browsers to work effectively, while XHR offers more control over request details but requires more boilerplate code.
Related benchmarks:
Native XHR vs Fetch (async/await - try/catch)
XHR vs fetch - wolf.bet
xhr vs fetch send
XHR vs fetch without JSON parsing
Comments
Confirm delete:
Do you really want to delete benchmark?