Fetch vs Xmlhttprequest vs Jquery Ajax

Question

Hi. I know the method Fetch ES6 is the latest. But I saw on the Jsperf website that the fetch is the slowest in relation to the famous XmlHttpRequest of JS Vanilla, and even slower than the $.Ajax jquery.

Why is he the slowest if he is the most current? can someone explain to me?

Test link: XHR vs jQuery vs fetch

Thank you.

Answer 1

To fetch API in fact it is JS Vanilla because it does not belong to some third-party library as functions of jQuery and intends to solve some problems of Xmlhttprequest (XHR), which reigned for more than a decade in asynchronous requests in Javascript, as:

• Input, output and managed states interacting only with a single object
• State based on events
• Not working well with Promise

Source

fetch() differs from the jQuery.ajax() especially in two ways:

• To Promise returned from fetch() will not reject the status of the HTTP error, even if the response is an HTTP 404 or 500. Instead, it will resolve normally, and it will only reject in case of network failure or if anything prevents the order from being completed.
• By default, the search will not send or receive cookies from the server, resulting in unauthenticated requests if the site is based on maintaining a user session.

Performance may vary between browsers, since each will have its own implementation of window.fetch (ex: Google V8 or Mozilla Spidermonkey).

Why slower?

The main reason in the difference in performance is due fetch() have more options in relation to XHR, which we can find here. Doing something new doesn’t necessarily mean it should be faster, that’s what happens in this case - available resources seem to be the priority.

---

Other sources:

• https://jakearchibald.com/2015/thats-so-fetch/
• https://github.com/github/fetch