XHR vs jQuery ajax vs get vs fetch

Benchmark created by Rodrigo on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
XHR - 2
var xhr = new XMLHttpRequest();
xhr.onload = function() {alert(1)};
xhr.open("get", "http://jsperf.com", true);
xhr.send();
ready
XHR - 3
var xhr = new XMLHttpRequest();
xhr.addEventListener( "loadend", function() {alert(1)} );
xhr.open("GET", "http://jsperf.com", true);
xhr.send();
ready
jQuery ajax
var request = $.ajax({
type: 'GET',
url: "http://jsperf.com",
async: true,
success: function() {alert(1);}
});
ready
jQuery get
var request = $.get("http://jsperf.com").done(function() {
  alert(1);
});
ready
Experimental Fetch API
fetch("http://jsperf.com").then(function(response) {
  alert(1);
});
ready
XHR - 1
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {"done"}
}
xhr.open("GET", "http://jsperf.com", true);
xhr.send();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Rodrigo on