首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何避开大内容的角度性能问题

如何避开大内容的角度性能问题
EN

Stack Overflow用户
提问于 2016-02-13 07:04:20
回答 1查看 826关注 0票数 2

我熟悉角的消化周期,以及它如何影响长列表和大模型值的性能。我只是好奇你有没有办法解决这个问题,特别是我的案子。我正在构建一个应用程序,它可能需要也可能不需要用户在textarea中输入大文本,例如错误日志,但是由于与大型模型上的双向数据绑定相关的角度固有问题,它会导致我的应用程序挂起。

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

下面是演示性能问题的plunkr。要查看挂起,开始输入文本区域,您将经历严重的滞后

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-02-13 14:34:36

当在元素上使用“借出”选项时,瓶颈不是摘要(这会有所贡献,但可以有效地解决),而是指令

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

代码语言:javascript
运行
复制
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 (鸡/蛋困境)。

一些东西也可以从角度指令给输入事件为了表现兼容性的处理中学到。

注意,类似的性能问题可能是由铬虫引起的,而不是由角度应用引起的。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35377092

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档