如何解决大内容的角度性能问题

我熟悉 Angular 的摘要周期以及它如何影响长列表和大模型值的性能。我只是好奇您是否有专门针对我的情况的问题的解决方法。 我正在构建一个应用程序，它可能需要也可能不需要用户输入大文本，例如错误日志textarea，但由于与 2 路数据绑定相关的角度固有问题大模型它导致我的应用程序挂起。

目前我要求用户在文件中附加大量内容。但我想知道是否有任何方法可以解决这个问题。 我能想到的一种潜在的解决方法是不在文本字段上使用模型并使用 Angular 的轻量级 jquery api 访问文本angular.element('#mytext').val()。但这种方法的缺点是将 JS 代码与 DOM 紧密绑定，这不是一个好的做法。我对更多“有角度”风格的解决方案感兴趣。

这是演示性能问题的 plunkr。要查看挂起情况，请开始在文本区域中键入内容，您会遇到严重的延迟

http://plnkr.co/edit/0wccRJjjlhJqZtdipDLv?p=preview http://plnkr.co/edit/0wccRJjjlhJqZtdipDLv?p=preview

瓶颈不是摘要（这会有所贡献，但可以有效地解决）ngModelOptions“去抖”选项 https://docs.angularjs.org/api/ng/directive/ngModelOptions#usage) but 添加的侦听器textarea指示 https://github.com/angular/angular.js/blob/v1.4.8/src/ng/directive/input.js#L1116 when ng-model用在元素上。

这种性能问题建议使用自定义指令而不是内置指令（ngModel在这种情况下）。对于双向绑定可能是

app.directive('bigText', function () {
  return {
    scope: {
      bigText: '='
    },
    template: '<textarea>',
    link: function (scope, element) {
      // .val(value) on directive init
      var initialized = false;
      // prevents .val(oldValueFromOutside) on input
      var internalChange = false;
      var $textarea = element.find('textarea');

      scope.$watch('bigText', function (oldVal, newVal) {
        if (internalChange || (initialized && oldVal === newVal)) return;
        initialized = true;
        $textarea.val(newVal);
      });

      // generic JS debounce,
      // for ex. https://github.com/niksy/throttle-debounce
      var handler = debounce(1000, function () {
        var text = $textarea.val();
        if (scope.bigText !== text) {
          internalChange = true;
          scope.$apply(function () {
            scope.bigText = text;
          });
          internalChange = false;
        }
      });
      $textarea.on('change keyup', handler);
      // $textarea.off on scope destroy
    }
  };
});

手动维护双向绑定的重要部分是使用internalChange标志，它可以防止从外部范围获取旧值，如newVal消化（先有鸡还是先有蛋的困境）。

从 Angular 指令对输入事件的处理中也可以学到一些东西为了表现 https://github.com/angular/angular.js/blob/v1.4.8/src/ng/directive/input.js#L1157 and 兼容性 https://github.com/angular/angular.js/blob/v1.4.8/src/ng/directive/input.js#L1164.

请注意，类似的性能问题可能是由以下原因引起的Chrome 错误 https://code.google.com/p/chromium/issues/detail?id=237433而不是通过 Angular 应用程序。