jQuery.ajax vs custom ajax

JavaScript performance comparison

Test case created by ThinkingStiff and last updated

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
Benchmark.prototype.setup = function() {
            function ajax( uri, settings ) {
   
                var ajax = new window.XMLHttpRequest(),
                    data = settings.type == 'GET' ? '' : settings.data,
                    async = settings.async ? settings.async : true;
                    uri = settings.type == 'GET' ? uri + ( settings.data ? '?' + settings.data : '' ) : uri;
   
                ajax.onreadystatechange = function () {
   
                    if ( ajax.readyState == 4 ) { //response ready
   
                        if ( ajax.status == 200 ) { //success
   
                            if ( settings.success ) settings.success( ajax.responseText, ajax.statusText );
                            if ( settings.complete ) settings.complete( ajax, ajax.statusText );
   
                        } else {
   
                            if ( settings.error ) settings.error( ajax, ajax.status, ajax.statusText );
   
                        };
   
                    };
   
                };
   
                ajax.open( settings.type, uri, async );
   
                if ( settings.headers ) {
   
                    for ( var header in settings.headers ) {
   
                        ajax.setRequestHeader( header, settings.headers[header] );
   
                    };
   
                };
   
                ajax.send( data );
   
            };
   
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
$.ajax GET
$.ajax( 'http://jsperf.com/browse/thinkingstiff', {"type": "GET"});
pending…
custom ajax GET
ajax( 'http://jsperf.com/browse/thinkingstiff', {"type": "GET"});
pending…
$.ajax POST
$.ajax( 'http://jsperf.com/browse/thinkingstiff', {

    "type": "POST",
    "data": "a=1233&b=asdfasd",
    "headers": { "x-session": "1234" },
    "success": function ( data, status ) {

        // success

    },
    "error": function ( response, status, error ) {

        // error

    }

});
pending…
ajax POST
ajax( 'http://jsperf.com/browse/thinkingstiff', {

    "type": "POST",
    "data": "a=1233&b=asdfasd",
    "headers": { "x-session": "1234" },
    "success": function ( data, status ) {

        // success

    },
    "error": function ( response, status, error ) {

        // error

    }

});
pending…

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

Compare results of other browsers

0 comments

Add a comment