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 应用程序。