javascript - 如何解决大内容的 Angular 性能问题

Question

我熟悉 Angular 的摘要循环以及它如何影响长列表和大模型值的性能。我只是想知道您是否有任何专门针对我的案例的解决方法。我正在构建一个可能会或可能不会要求用户在 textarea 中输入大文本(例如错误日志)的应用程序，但由于与 large 上的 2 向数据绑定(bind)相关的 Angular 固有问题建模 它导致我的应用程序挂起。

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

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

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

Answer 1

瓶颈不是摘要(这会有所帮助，但可以用 ngModelOptions 'debounce' option 有效地解决)，而是 a listener added by textarea directive当在元素上使用 ng-model 时。

这种性能问题建议使用自定义指令而不是内置指令(在本例中为 ngModel)。对于双向绑定(bind)，它可能是

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

手动维护双向绑定(bind)的重要部分是使用 internalChange 标志，它可以防止从外部范围获取旧值作为摘要上的 newVal(先有鸡还是先有蛋的困境) .

也可以从 Angular 指令对输入事件的处理中学到一些东西 for performance和 compatibility .

请注意，类似的性能问题可能是由 Chrome bug 引起的而不是 Angular 应用程序。