Angularjs $http ajax 请求比 Jquery ajax 慢答案

【问题标题】：Angularjs $http ajax request slow comparing to Jquery ajaxAngularjs $http ajax 请求比 Jquery ajax 慢
【发布时间】：2015-03-17 17:59:21
【问题描述】：

我最近开始从 jQuery 迁移到 Angularjs。我遇到的问题是，与 jquery ajax 调用相比，角度 $http 调用确实很慢。当我对我的服务器执行 Angular 的 $http 请求时，我会在 1.3 秒到 1.7 秒后收到响应。但是当我做简单的时候

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

响应时间为 200 毫秒到 300 毫秒。我在 Chrome Dev Tools CPU Profiler 页面上看不到太多东西。从我尝试调试的内容来看，问题似乎出在 $http 方法中，我没有任何手表可以使摘要运行缓慢。有没有人遇到过类似的问题？还是只是 Angular 超级慢？

请求的 Chrome 分析器视图： http://i.stack.imgur.com/R2jKx.png

用于 AJAX 响应的 Chrome 分析器视图： http://i.stack.imgur.com/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) {
        });
    };
});

【问题讨论】：

我使用 ngResource 并且速度非常快，虽然我不确定您的情况可能是什么问题，但是使用带有 ng-resource 的工厂效果很好。

标签： jquery ajax angularjs performance

【解决方案1】：

我找到了问题所在。我在后端使用带有 Django Debug Toolbar 的 Django，并且默认情况下，Angular 的 $http 请求不会添加“X-Requested-With”标头，其中 jQuery ajax 请求会添加此标头。所以我只是在角度添加了这个标题：

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

Angular 中的响应时间现在类似于 jQuery 响应时间。

【讨论】：