CODEWITHSUNDEEP
jqueryajaxangularjsperformance
paul983
paul983

Reputation: 51

Angularjs $http ajax request slow comparing to Jquery ajax

I recently started moving from jQuery to Angularjs. The issue I encountered is that angular $http call is really slow comparing to jquery ajax call. When I'm doing angular's $http requests to my server, I get responses after 1.3s to around 1.7s. But when I do simple 

$.ajax({
        type: "POST",
        url: '?lang_page=1'
    })
    .done(function(data) {
    });

response times are 200ms to 300ms. I don't see to much on the Chrome Dev Tools CPU Profiler page. From what I tried to debug, it looks like the problem is in $http method, I don't have any watches that could make digest running slowly. Has anyone got similar problems ? Or is it just Angular being super slow ?

Chrome profiler view for the request: https://i.sstatic.net/R2jKx.png

Chrome profiler view for AJAX response: https://i.sstatic.net/Q8h1u.png

main.html:

<html>
    <head><script data-main="/staticfiles/js/require-patterns.js" 
            src="/staticfiles/js/bower_components/requirejs/require.js"></script>
    </head>

    <body><div ng-controller="PatternsCtrl"></div></body>
</html>

require-patterns.js:

require.config({
    paths: {
        angular: 'bower_components/angular/angular',
        jQuery: 'bower_components/jquery/dist/jquery',
    },
    shim: {
        'angular' : {
            'exports' : 'angular'
        },
        'jQuery': {
            'exports' : '$'
        },
    },
    priority: [
        "angular",
        'jQuery',
   ],
    deps: [],
    callback: null,
    baseUrl: '/staticfiles/js'
});
require([
    'angular',
    'jQuery',
    'patterns.module',
    ], function(angular, app, $) {
        var $html = angular.element(document.getElementsByTagName('html')[0]);
        angular.element().ready(function() {
            angular.bootstrap($html, ['myApp']);
        });
    }
);

patterns.module.js:

'use strict';
define([
    'angular',
    'components/patterns/patternsController'
], function(angular, pCtrl) {
    return angular.module('mymod', [
        'mymod.patterns',
    ]);
});

patternsController.js:

'use strict';
define([
    'angular'
], function(angular) {
    return angular.module('mymod.patterns', []).controller('PatternsCtrl', PatternsCtrl);

    PatternsCtrl.$inject = ['$http'];

    function PatternsCtrl($http) {
        console.log('patterns controler');
        $http({
            method: 'POST',
            url: '?lang_page=1'
        })
        .success(function(data, status) {
        });
    };
});

Upvotes: 2

Views: 3490

Answers (1)

paul983
paul983

Reputation: 51

I've found the issue. I'm using Django with Django Debug Toolbar on the backend, and angular's $http request doesn't add "X-Requested-With" header by default, where jQuery ajax request add this header. So I just added this header in angular:

angular.module('mymod', []).config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
    }]);

and response times in angular are now similar to jQuery response times.

Upvotes: 2

Related Questions