javascript – Fetch vs XMLHttpRequest vs Jquery Ajax

Question:

Hi. I know the ES6 method Fetch is the latest. But I saw on the JSPerf site that fetch is slower compared to JS Vanilla's famous XmlHttpRequest , and even slower than JQuery's $.Ajax .

Why is it the slowest if it's the most current? can someone explain to me?

Test link: XHR vs jQuery vs fetch

Thanks.

Answer:

The fetch API is actually JS Vanilla as it doesn't belong to any third-party library like jQuery functions and is intended to solve some problems of XMLHttpRequest (XHR), which reigned for over a decade in asynchronous requests in Javascript, such as:

  • Input, output, and managed states interacting only with a single object
  • event based state
  • Not working well with Promise

Source

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

  • The Promise returned from fetch() not reject the HTTP error status, 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 is 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 as each browser will have its own window.fetch implementation (eg Google's V8 or Mozilla's Spidermonkey).

Why slower?

The main reason for the difference in performance is because fetch() has more options compared to XHR, which we can find here . Making something new doesn't necessarily mean it should go faster, it does in this case – available resources seem to be the priority.


Other sources:

Scroll to Top