Javascript AngularJS小型测试应用程序渲染速度非常慢

我正在通过在我的一个项目中使用它来学习angular，如下所示：

• 后端的Node.js/express
• 观点和偏袒的玉
• 前端有棱角

我已经很容易地设置了路由，并且能够正确地显示我的所有（静态）部分

当我添加第一个控制器时，问题就出现了：我添加了一个$HTTPGET以从服务器获取用户信息，然后将其显示在表单的输入字段中。它一路工作，但页面变得非常慢，以至于在我的电脑上打开一个选择下拉列表需要大约2秒钟。。。我做错什么了吗

无论我是否显示值，都会出现减速，如果我从视图中删除所有{{user.}}，速度仍然非常慢

http请求几乎是立即执行的，所以我看不出它会有什么影响。。。我的点子快用完了

同样，这不是一个页面加载时间问题，这里的问题是这个应用程序中的某些东西正在不断地消耗大量的CPU，我不知道是什么/为什么

控制器代码（在/app/controlers.js中）：

模块代码：

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}}')

查看模板：

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}}')

编辑： 我已经移除了所有控制器，在某种程度上，我看到了同样的慢度问题。。。因此，似乎我在页面中添加了角度，这一简单的事实使得页面速度非常慢。现在，我将bootstrap3管理模板与许多其他JS/css依赖项一起使用，它能解释这种行为吗

编辑2:

---

值得一提的是，CPU吸吮仅在我加载部分CPU时开始。我已经通过交换包含控制器的部分和索引的部分来测试了这一点，这种方式在页面加载时显示，速度完全正常。当我加载另一个部分时，它会再次启动。

更新问题，并找到解决方案：

AngularJS很棒。但它不能很好地与web上随处可见的高度jquery化的模板相结合。我的问题来自于我的引导模板，它加载了很多jquery插件，并在所有这些插件上执行了许多init函数。当我导航到一个部分时，很多元素都在变化，很多绑定到这些元素的事件将不再存在，浏览器也无法识别发生了什么

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

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

当代码太长时，我已经将init函数添加到我的控制器中`

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

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

我知道这是一个糟糕的做法，但是现在在这个开发中要求每个人改变主题已经太迟了。学习这个激动人心的框架需要付出很小的代价。下一个项目，我将尝试从一开始就避免使用jQuery

---

吸取了教训

您能显示html页面，其中包含了所有依赖项，比如js文件吗files@V31看起来很多js文件，比如jquery、bootstrap、jquery.validate，还有很多都可以从cdn加载……你也可以把所有的js文件放在html的末尾，这样它们就可以在末尾加载了——它们实际上是在末尾加载的，那是我的玉锉的底部。正如我所说，这不是一个页面加载问题，我稍后会处理这个问题。从进一步的调查来看，它似乎是从我在主页中加载一个分部开始的。@V31实际上，你已经给了我一个线索。看起来，如果我把3个“主题”文件放在我所有的分区中，问题就消失了。我怀疑在DOM更改时会出现某种初始化错误。我会继续调查。angular ui团队创建了一个本机引导实现-您可能会感兴趣