javascript - AngularJS 小测试应用程序渲染速度极慢

Question

我正在通过在我的项目中使用它来学习 Angular ，如下所示:

• 后端的 Node.js/express
• Jade 用于 View 和局部
• 前端有 Angular。

我已经轻松设置了路由，并且能够正确显示我的所有(但静态的)部分。

当我添加第一个 Controller 时出现了问题:我添加了 $http get 来从服务器获取用户信息，然后将其显示在表单的输入字段中。它一直有效，但页面变得非常慢，以至于在我的电脑上打开一个选择下拉菜单大约需要 2 秒......我是不是做错了什么？

无论我是否显示值，速度都会变慢，如果我从 View 中删除所有 {{user.}}，它仍然很慢。

http 请求几乎是立即执行的，所以我不知道它如何产生影响......我已经没有想法了。

再说一次，这不是页面加载时间问题，这里的问题是这个应用程序中的某些内容连续消耗了大量的CPU，而且我不知道是什么/为什么。

Controller 代码(在/app/controlers.js 中):

function ProfileCtrl($scope, $http) {
  $http.get('/api/userinfo')
    .success(function(data, status, headers, config) {
      $scope.user = data;
    }); 
}

模块代码:

angular.module('DTTB', ['ngRoute']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/index',
        controller: IndexCtrl
      }).
      when('/settings', {
        templateUrl: 'partials/settings',
        controller: SettingsCtrl
      }).
      when('/profile', {
        templateUrl: 'partials/profile',
        controller: ProfileCtrl
      }).
      when('/support', {
        templateUrl: 'partials/support',
        controller: SupportCtrl
      }).
      otherwise({
        redirectTo: '/'
      });
    $locationProvider.html5Mode(true);
  }]);

查看模板:

form#form.form-horizontal(ng-controller='ProfileCtrl')
  section.panel
    header.panel-heading
      h2.panel-title Profile
      p.panel-subtitle
        | Your basic information
    .panel-body
      .form-group
        label.col-sm-3.control-label
          span.required *
          | Full Name
        .col-sm-9
          input.form-control(type='text', name='fullname', placeholder='John Doe', required='required' , value='{{ user.full_name }}')
      .form-group
        label.col-sm-3.control-label
          span.required *
          | Street Address 1
        .col-sm-9
          input.form-control(type='text', name='address1', placeholder='123 W. Sesame Street', required='required' , value='{{user.address1}}')
      .form-group
        label.col-sm-3.control-label Street Address 2
        .col-sm-9
          input.form-control(type='text', name='address2', placeholder='Suite #, Unit #, Apt #' , value='{{user.address2}}')
      .form-group
        label.col-sm-3.control-label
          span.required *
          | City
        .col-sm-9
          input.form-control(type='text', name='city', placeholder='Los Angeles', required='required' , value='{{user.city}}')

编辑:我已经删除了所有 Controller ，并且在某种程度上，我看到了同样的缓慢问题......所以看来，我向页面添加 Angular 这一简单事实使它变得非常非常慢。现在，我使用带有许多其他 JS/css 依赖项的 bootstrap3 管理模板，它可以解释这种行为吗？

编辑2:

可能值得一提的是，CPU 消耗仅在我加载部分内容时才开始。我通过将包含 Controller 的部分与索引部分交换来测试了这一点，这样它就显示在页面加载上，并且速度完全正常。当我加载另一个部分时，它会再次开始。

Answer 1

问题的更新以及解决方案:

AngularJS 非常棒。但它与网络上随处可见的高度 jQuerized 模板不能很好地混合。我的问题来自于我的引导模板，它加载了很多 jquery 插件并在所有这些插件上执行了许多 init 函数。当我导航到部分时，许多元素正在发生变化，绑定(bind)到这些元素的许多事件将不再存在，并且浏览器无法弄清楚发生了什么。

我用两种不同的方式解决了这个问题:

方便时使用指令初始化我的插件。

当代码太长时，我将 init 函数添加到我的 Controller 中`

$scope.$on('$viewContentLoaded',function(){ 
    $(function(){
        /*jQuery init stuff goes here*/
    });
}); 

对于像我这样的新手，加载 AngularJS View 时会触发此事件。

我知道这是一个不好的做法，但现在在这个开发中要求每个人更改主题已经太晚了。学习这个令人兴奋的框架只需付出很小的代价。下一个项目，我会尝试从一开始就避免使用 jQuery。

教训很好!